JavaScript6——导航栏及二级下拉栏的制作

这次以新浪的导航栏为例模仿制作了一个，具体代码如下：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .u1{
        height: 41px;
        width: 100%;
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
        color: black;
    }
    .u1>li {
        list-style-type: none;
        float: right;
        line-height:41px;
        padding: 0 15px;
    }
    .u1>li>a{
        display: inline-block;
        text-decoration: none;
        color: #7d7d7d;
        width: 80px;
        text-align: center;
    }
    .u1>li>a:hover{
        cursor: pointer;
        background-color: antiquewhite;
        color: #ff8500;
    }
    .u2{
        display: none;
    }
    .u2 li{
        list-style-type: none;
    }
    .u2 li a{
        display: block;
        text-align: center;
        line-height: 41px;
        color: #7d7d7d;
        text-decoration: none;
    }
    .u2 li a:hover{
        background-color: antiquewhite;
        color: #ff8500;
    }

</style>

<ul class="u1">
    <li><a href="#">登录</a>
        <ul class="u2">
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li><a href="#">微博</a>
        <ul class="u2">
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li><a href="#">博客</a>
        <ul class="u2">
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
    <li><a href="#">邮箱</a>
        <ul class="u2">
            <li><a href="#">私信</a></li>
            <li><a href="#">评论</a></li>
            <li><a href="#">@我</a></li>
        </ul>
    </li>
</ul>
<script>
    var u1=document.querySelector('.u1');
    var lis=u1.children;
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=function (){
            this.children[1].style.display='block';
        }
    }
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseout=function (){
            this.children[1].style.display='none';
        }
    }
</script>

效果图如下：

下面讲一下大致的设计过程以及思路：
首先用一个大的ul标签里面用四个li标签来实现主导航栏的实现，然后在li标签中再加入ul和里标签来实现下拉框的实现。用css来调节样式和位置。
在js中分别为主导航栏的标签添加鼠标指针触碰事件（onmouseover和onmouseout）当鼠标触碰到哪一个标签，相应标签的二级菜单就会展示出来（display：block/none），这里使用for循环会比较简单，使用子节点也会节省很多的代码。
以上就是大体思路，欢迎讨论和指正。