纯css 来实现下拉菜单

对于导航栏中的下拉菜单，是我们在项目中遇到最多的一种下拉菜单的情况，

一般儿情况下，我们都是常用JavaScript 来实现下来功能。不过，

我们都知道，当我们在编码过程中，如果能用css 实现的功能，绝不用 js 去控制，

这是因为对于计算机而言，js 的性能远不及css 稳定，所以，对于下拉菜单我们同样可以用css 来实现。

html部分：

 1 <ul id="headerTabs">
 2     <li>
 3         <a href="/found/traders/list.html" class="title">首页</a>
 4     </li>
 5     <li>
 6         <a href="/found/ib/ibAccount/ibList.html" class="title">公募基金</a>
 7         <div class="TabNav">
 8             <p><span class="iconfont">&#xe663;</span></p>
 9             <p><a href="">基金排行</a></p>
10             <p><a href="">优选基金</a></p>
11             <p><a href="">基金定投</a></p>
12             <p><a href="">定投排行</a></p>
13         </div>
14     </li>
15     <li>
16         <a href="/found/calendar/index.html" class="title">基金资讯</a>
17         <div class="TabNav">
18             <p><span class="iconfont">&#xe663;</span></p>
19             <p><a href="">基金要闻</a></p>
20             <p><a href="">基金观点</a></p>
21             <p><a href="">基金动态</a></p>
22             <p><a href="">基金研究</a></p>
23             <p><a href="">基金学校</a></p>
24         </div>
25     </li>
26 </ul>

 

css 部分：

 1 #headerTabs li{
 2    position: relative;
 3     float: left;
 4     width: 180px;
 5     height: 50px;
 6     line-height: 50px;
 7     text-align: center;
 8 }
 9 // 下拉的菜单盒子div .TabNav默认隐藏，绝对定位到该导航下
10 #headerTabs .TabNav{
11     display: none;
12     position: absolute;
13     top: 50px;
14     left: 0px;
15     z-index: 100;
16 }
17 // 当鼠标划过导航时，该下拉的菜单盒子div .TabNav显示 
18 #headerTabs li:hover .TabNav{
19     display:block;
20 }
21 
22

 

效果：

 

 

 注：

　　1.为了兼容ie 需要给下拉内容的盒子设置 层级 z-index ；否则在ie浏览器下会出现 ，下拉内容被其他内容遮挡，从而影响效果。

　　2.只需且必须是给下拉内容的盒子元素的父元素，即导航条元素，添加 hover 属性即可，无需再给下拉的盒子元素添加。

 

以上，纯属个人拙见，如有不当，请指出，谢谢！

 

posted @ 2017-03-30 17:21  cmyoung  阅读(250)  评论(0)  编辑  收藏  举报