HBuilder-二级菜单基础进阶（收藏式）

代码如下：

<style type="text/css">
            *{
                margin: 0px;
                padding:0px;
                font-size: 20px;
            }
            #nav{
                width:440px;
                background: #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: #ff197d;
            }
            #nav ul li a:hover{
                background: blue;
				transition: 1.5s;/*动画时间1.5s*/
            }
            #nav ul li div {
                font-size: 18px;
                display: none;    
                
            }
            #nav ul li div a{
                font-size: 16px;v
                line-height: 25px;
                text-align: center;
                background: red;    
                transition: background 2s;
            }
            #nav ul li div a:hover{
                background: #fff826;
				transition: 1.5s;/*动画时间1.5s*/
                font-size:19px;
            }
        </style>
<div id="nav">
                <ul>
                    <li>
                        <a href="#">html元素</a>
                        <div>
                            <a href="#">list-style</a>
                            <a href="#">decoration</a>
                            <a href="#">line-height</a>
                        </div>
                    </li>
                    <li>
                        <a href="#">js部分</a>
                        <div>
                            <a href="#">事件冒泡</a>
                            <a href="#">跨域</a>
                            <a href="#">ajax</a>
                        </div>
                    </li>
                    <li>
                        <a href="">jquery方法</a>
                        <div>
                            <a href="#">filter</a>
                            <a href="#">has</a>
                            <a href="#">find</a>
                            <a href="#">html</a>
                        </div>
                    </li>
                </ul>
            </div>
			<script type="text/javascript">
			        window.onload=function(){
			            var aLi=document.getElementById("nav").getElementsByTagName("li"); 
			            for(var i=0; i<aLi.length;i++){
			                
			                aLi[i].onmouseover=function(){
			                    this.children[1].style.display='block';//选取当前li元素的第二个子元素
			                }
			                aLi[i].onmouseout=function(){
			                    this.children[1].style.display='none';
			                }
			            }
			        }
			    </script>

效果如下：

鼠标靠近区域展示隐藏内容