二级下拉菜单

思路:移入一级菜单显示二级菜单，移出就隐藏

实现代码
css部分:

*{margin:0;padding: 0;font-size: 20px;}
#nav{
    width: 330px;
    background-attachment: #9ACD32;
    margin: auto;
}
#nav ul{list-style: none;}
#nav ul li{
    width: 110px;
    float: left;
}
#nav ul li a{
    display: block;
    text-decoration:none;
    text-align:center;
    background:#FF909D;
}
#nav ul li a:hover{background: #CCCCDD;}
#nav ul li div{
    display: none;
}
#nav ul li div a{
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    background: #CCCCDD;
    transition: background 2s;
}
#nav ul li div a:hover{
    background:  #FF9090;
    font-size:19px;
}

html部分

<div id='nav'>
   <ul>
        <li>
            <a href="#">山东</a>
            <div>
                <a href="#">济南</a>
                <a href="#">青岛</a>
                <a href="#">烟台</a>
            </div>
        </li>
        <li>
            <a href="#">河南</a>
            <div>
                <a href="#">郑州</a>
                <a href="#">洛阳</a>
                <a href="#">开封</a>
            </div>
        </li>
        <li>
            <a href="#">江苏</a>
            <div>
                <a href="#">南京</a>
                <a href="#">扬州</a>
                <a href="#">苏州</a>
            </div>
        </li>
    </ul>
</div>

原生js实现

window.onload=function(){
    var aLi=document.getElementById("nav").getElementsByTagName("li");
    //console.log(aLi);
    for(let i=0;i<aLi.length;i++){
        aLi[i].onmouseover=function(){
            this.children[1].style.display='block';
        }
        aLi[i].onmouseout=function(){
            this.children[1].style.display='none';
        }
    }
}

先找到所有的以及菜单(li)，再循环绑定鼠标事件，移入就显示(通过children()拿到子元素)二级菜单(div)，移出就隐藏

通过jq的show()和hide()实现

$(function(){       
    $("#nav ul li").on({mouseover:function(){
        $(this).children('div').show();
    },mouseout:function(){
        $(this).children('div').hide();
    }});
});

通过jq的toggle方法实现

 $(function(){       
   $("#nav ul li").on({mouseover:function(){
        $(this).children('div').toggle();
    },mouseout:function(){
        $(this).children('div').toggle();
    }});
});

参考自:参考