纯css打造最简洁下拉菜单-无js-非常实用

2019独角兽企业重金招聘Python工程师标准>>>

先上图：（点击图片可到楼主的个人网站）

 样式部分：

分全局，一级菜单和二级菜单。初始化二级的ul 的display 默认是隐藏的。

<style>
/*公共全局*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
a{ color:#333; text-decoration:none;}

/*一级菜单*/
.nav ul li{ float:left; width:200px; background:#FC0; margin-right:1px; }  /*一级菜单宽度改过，下面二级自动继承*/
.nav ul li a{ width:100%; line-height:30px;  text-align:center; display:block}
.nav ul li a:hover{ background:#333; color:#fff;}
.nav ul li:hover ul{ display:block;  width:100%;}  //这句是关键

/*二级菜单*/
.nav ul li ul{ display:none; width:100%;}
.nav ul li ul li a{ float:left; width:100%; height:30px; line-height:30px;}
.nav ul li ul li a,.nav ul li ul li a:visited{}
.nav ul li ul li a:hover{ background:#333; color:#fff;}
</style>

 结构方面：

二级菜单UL是嵌套在一级的li中。通过样式的hover来实现让它display显示出来。

<div class="nav">
   <ul>
     <li><a href="#">首页</a></li>
     <li><a href="#">客户</a>
        <ul>
           <li><a href="#">11</a></li>
           <li><a href="#">22</a></li>
           <li><a href="#">33</a></li>
        </ul>
     </li>
     <li><a href="#">车辆</a>
         <ul>
           <li><a href="#">44</a></li>
           <li><a href="#">55</a></li>
           <li><a href="#">66</a></li>
        </ul>
     </li>
   </ul>
</div>

 

转载于:https://my.oschina.net/u/583531/blog/792445