js导航下拉菜单

使用定时器、鼠标移动事件

var img = $('#user_head');
var menu = $('.nav_list');
var i=0;
var timer;
img.mouseenter(function () {
    clearTimeout(timer)
    menu.show()
})
img.mouseleave(function () {
    timer = window.setTimeout(function () {
        menu.hide()
    },500)
})
menu.mouseenter(function () {
    clearTimeout(timer)
    // menu.css('visibility','vidible')
})
menu.mouseleave(function () {
    menu.hide()
})

使用纯css方式

• html

<nav class="nav-swrap">
    <ul>
        <li><a href="#">首页</a> </li>
        <li>
            <a href="#">消息管理</a>
            <ul class="sub-nav">
                <li><a href="#1">添加用户</a> </li>
                <li><a href="#">删除用户</a> </li>
                <li><a href="#">查询用户</a> </li>
            </ul>
        </li>
        <li>
            <a href="#">用户管理</a>
            <ul class="sub-nav">
                <li><a href="#">添加用户</a> </li>
                <li><a href="#">删除用户</a> </li>
                <li><a href="#">修改用户</a> </li>
            </ul>
        </li>
        <li><a href="#">头像</a></li>
    </ul>

</nav>

• css

*{
    padding: 0; margin: 0; list-style: none;
}
/*初始化 a */
a{
    text-decoration: none; color: deepskyblue;
}
/*设置外层导航布局*/
.nav-swrap>ul{
    display: -webkit-box;
    width: 80%;
    height: 50px;
    margin: 0 auto;
}
/*外层li*/
.nav-swrap>ul>li{
    -webkit-box-flex: 1;
    height: 100%; line-height: 50px;
    background-color: #eee;
    text-align: center;
}

/*内层ul, 绝对定位, 高度为0，保证鼠标移动到二级导航下，不会出现*/
.sub-nav{
    padding-top: 10px;
    width: 100%;
    -webkit-perspective: 400px; /* 透视，站在400px前看 */
}
/*内层li*/
.sub-nav>li{
    background: -webkit-linear-gradient(top, #ccc,#eee);
    width: 50%;
    margin: 0 auto;
}
.sub-nav{
    display: none;
}
.nav-swrap>ul>li>a{
    display: inline-block;
    height: 100%;
    width: 100%;
}
.nav-swrap>ul>li>a:hover+ul,.sub-nav:hover{
    display: block;
}