<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>

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

 <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>

.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;}

<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>