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;
}