二级菜单下拉框

css部分：

a {
				text-decoration: none;
				color: #000;
			}
            /* 上面的是去除a标签的默认值及字体变色 */
			li {
				list-style: none;
			}
 
			.nav {
				width: 900px;
				margin: 200px auto;
			}
 
			.nav>li {
				width: 70px;
				height: 30px;
				float: left;
				margin: 10px 10px;
				border: 1px solid #eee;
				text-align: center;
				position: relative;
			}
 
			.nav>li>ul {
				display: none;
				/* 注意:display:none;放在整体的下拉框的整体ul中 */
				height: 200px;
				position: absolute;
				left: -30px;
				top: 31px;
			}
 
			.nav>li>ul>li {
				width: 50px;
				height: 50px;
				line-height: 50px;
				border: 1px solid orange;
				background-color: pink;
			}
 
			.nav>li:hover {
				background-color: #eee;
			}

HTML部分：

<ul class="nav">
            <li><a href="#">微博</a>
                <ul>
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我的</li>
                </ul>
            </li>
            <li><a href="#">微博</a>
                <ul>
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我的</li>
                </ul>
            </li>
            <li><a href="#">微博</a>
                <ul>
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我的</li>
                </ul>
            </li>
            <li><a href="#">微博</a>
                <ul>
                    <li>私信</li>
                    <li>评论</li>
                    <li>@我的</li>
                </ul>
            </li>
        </ul>

 js内容部分：

<script>
            var nav = document.querySelector('.nav')
            var lis = nav.children; //得到4个li
            for (var i = 0; i < lis.length; i++) {
                // console.log(lis[i]);
                lis[i].onmouseover = function() {
                    this.children[1].style.display = 'block';
                    
                }
                lis[i].onmouseout = function() {
                    this.children[1].style.display = 'none';
                }
            }
        </script>