ui li 菜单 点击添加下级_如何制作导航栏中的下拉菜单

1.写入一级菜单

    <ul  class="nav clearfix">
      <li  class="nav-li fl"><a href=''>首页</a></li>
      <li  class="nav-li fl"><a href=''>学习导航</a></li>
      <li  class="nav-li fl"><a href=''>教程</a></li>
      <li  class="nav-li fl"><a href=''>经验</a></li>
      <li  class="nav-li fl"><a href=''>学堂</a></li>
      <li  class="nav-li fl"><a href=''>交作业</a></li>
      <li  class="nav-li fl"><a href=''>欣赏</a></li>
      <li  class="nav-li fl"><a href=''>下载</a></li>
      <li  class="nav-li fl"><a href=''>找工作</a></li>
    </ul>

css代码：

 .nav{
            background-color:#222222;
        }
       .nav-li>a{   
           padding:16px 20px;   
           color:#eeeeee;   
           display:block;   
           text-decoration:none;   
           font-size:14px;   
           line-height:18px;
        }

一级菜单

2.在一级li a中插入ul列表作为二级菜单

 <ul  class="nav clearfix">
      <li  class="nav-li fl"><a href=''>首页</a>
        <ul class="dorp-box">
            <li class="drop-li"><a href=''>站长历程</a></li>
            <li class="drop-li"><a href=''>团队介绍</a></li>
        </ul>
      </li>
      <li  class="nav-li fl"><a href=''>学习导航</a></li>

导航栏高度被撑开

3.设置子列表相对于导航第一项绝对定位

top值等于导航的高度，

.nav{
            background-color:#222222;
            position: relative;
        }
        .dorp-box{
            position:absolute;
            top:50px;
            background-color:#404040; 
            min-width:110px;
            display:none;
        }
.drop-li>a{ 
            padding:8px 20px;  
            color:#ffffff;  
            display:block; 
            text-decoration:none;  
            font-size:12px;
        }

设置子列表相对于导航第一项绝对定位

4.鼠标悬停一级菜单时二级菜单出现

<script>
    window.onload=function()  {                      
        var oBtn=document.querySelector(".nav-li"); //获取一级菜单元素
        oBtn.onmouseover=function(){
          // this.style.display="none";
          this.querySelector('.dorp-box').style.display="block"
         //给二级菜单添加阴影
         this.querySelector('.dorp-box').style.boxShadow=" 0 2px 2px gray"
        }
        //鼠标出
        oBtn.onmouseout=function(){
            this.querySelector('.dorp-box').style.display="none"
            this.querySelector('.dorp-box').style.boxShadow='none'
        }
    
    }
</script>

知乎视频​www.zhihu.com