纯css 来实现下拉菜单

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

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

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

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

html部分：

<ul id="headerTabs">
    <li>
        <a href="/found/traders/list.html" class="title">首页</a>
    </li>
    <li>
        <a href="/found/ib/ibAccount/ibList.html" class="title">公募基金</a>
        <div class="TabNav">
            <p><span class="iconfont">&#xe663;</span></p>
            <p><a href="">基金排行</a></p>
            <p><a href="">优选基金</a></p>
            <p><a href="">基金定投</a></p>
            <p><a href="">定投排行</a></p>
        </div>
    </li>
    <li>
        <a href="/found/calendar/index.html" class="title">基金资讯</a>
        <div class="TabNav">
            <p><span class="iconfont">&#xe663;</span></p>
            <p><a href="">基金要闻</a></p>
            <p><a href="">基金观点</a></p>
            <p><a href="">基金动态</a></p>
            <p><a href="">基金研究</a></p>
            <p><a href="">基金学校</a></p>
        </div>
    </li>
</ul>

css 部分：

#headerTabs li{
   position: relative;
    float: left;
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
// 下拉的菜单盒子div .TabNav默认隐藏，绝对定位到该导航下
#headerTabs .TabNav{
    display: none;
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 100;
}
// 当鼠标划过导航时，该下拉的菜单盒子div .TabNav显示 
#headerTabs li:hover .TabNav{
    display:block;
}

            

效果：

 注：

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

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

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