首页 > 技术文章 > css下拉菜单

Isabel4u 2017-05-10 14:20 原文

<li class="drop">
<a href="">
帮助中心
<em class="arrow"></em>
</a>
<ul class="down">
<li class="erji"><a href="">买家服务</a></li>
<li class="erji"><a href="">商家服务</a></li>
<li class="erji"><a href="">规则中心</a></li>
</ul>
</li>

样式部分:

#M_PC_top_nav .inner .down{display: none;}
#M_PC_top_nav .inner .drop:hover .down{display: block;}(可理解为A:hover  .B {display:block;} ,B包裹着下拉的li,A包裹着B)
#M_PC_top_nav .inner .drop ul li{float: none;}

 float:none使下拉菜单显示时竖着排列 !

新bug !!!

当鼠标移“下载APP”时,会出现下拉菜单,但如果此处相对定位和绝对定位设置不好(如都设为relative),会造成一旦下拉菜单display=none时,最后两个块,也就是”下载App“和”帮助中心“会移到“美丽说会员”那里,重叠在一起,当把下拉菜单设置为relative,而后两个块设置为absolute时。问题就解决了,至于原理,日后有待分解。

推荐阅读