下拉菜单的制作

    * {
        list-style: none;
        margin: 0;
        padding: 0;
    }
.nav li {
    position: relative;
    float: left;



    width: 200px;
    height: 40px;
    background:yellow;
}
.nav li a{
    display: block;
    line-height: 40px;
    text-align: center;
    
}
.navs  {
    display: none;
    position: absolute;
    line-height: 40px;
    text-align: center;
   background-color:pink;
}


</style>


<ul class="nav">
    <li>
        <a href=>你好</a>
        <ul class="navs" >
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </li>
    <li>
        <a href=>你好</a>
        <ul class="navs" >
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </li>
    <li>
        <a href=>你好</a>
        <ul class="navs" >
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </li>
    <li>
        <a href=>你好</a>
        <ul class="navs" >
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </li>
    <li>
        <a href=>你好</a>
        <ul class="navs" >
            <li>你好</li>
            <li>你好</li>
            <li>你好</li>
        </ul>
    </li>
</ul>
</body>

第一种做法，用根据当前自定义的属性值当索引号来制作

 var li =document.querySelector('.nav').children 
 var lis =document.querySelectorAll('.navs')
         for(var i=0; i<li.length;i++){
             li[i].setAttribute('data-index',i)
             li[i].onmouseover =function(){
            var index =this.getAttribute('data-index')
                lis[index].style.display = 'block'
}

            li[i].onmouseout=function(){
            var index =this.getAttribute('data-index')
                lis[index].style.display = 'none'
}
            }
      

第二种做法，点击时直接改变当前元素下面的第二个元素就行了，用this.children[1], element.children包含的是所有子元素的集合

var li =document.querySelector('.nav').children //获取最外面的li元素
for(var i=0;i<li.length;i++){
          li[i].onmouseover =function(){
              this.children[1].style.display= 'block'  //li元素下面的第二个元素显示
          }
          li[i].onmouseout =function(){
              this.children[1].style.display= 'none' //li元素下面的第二个元素隐藏
          }
      }