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>
知乎视频
