在网上找的,感觉不错,所以进行一下拆解.(明明对方写的挺简单明了的)
首先是html布局
<div class="nav"> <ul> <li> <a href="">导航1</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航2</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航3</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> </ul> </div> <div class="a">asdgfsdfhse</div>
就是在原有的一级导航的li里追加一套ul>li.
至于需要几个菜单,就加几个li就行.
在这顺便一提,为了防止二级栏将下面的内容顶下去,所以需要给追加的ul加一个绝对定位！
然后是css部分，由于多了比较乱，所以一点点的来。
首先，给一级导航布局。
*{margin: 0;padding: 0;} body{padding: 20px;} .nav{ overflow: hidden; } .nav ul li{ list-style-type: none; float: left; background: #ccc; /* padding: 10px; */ } .nav ul li a{ text-decoration: none; display: block; padding: 10px; } .nav ul li a:hover{ background: #fff; color: #f00; }
比较难看，请见谅……
然后就是二级的部分，由于我使用的是后代选择器，即。nav下的所有li都将应用样式，所以需要将二级栏的浮动float: none;取消
当然，如果想实现横条的效果，那就不需要了。
.nav ul li ul li{ float: none; } .nav ul li ul{ position: absolute; display: none; } .nav ul li:hover ul{ display: block; }
将最里面的li取消浮动，使其纵向排列。
然后将最里面的ul隐藏，使用display: none;
而position: absolute;的这个绝对定位，则是避免显示二级栏时，将下面的内容顶下去。
display: block;在使用过display: none;后使用的话，将表示显示之前所隐藏的那个ul。
当然,要显示也得在鼠标悬浮的时候显示,所以就通过.nav ul li:hover ul{}这种方式显示出二级栏.
这是全部,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} body{padding: 20px;} nav{ width: 100%; background: #284f86; overflow: hidden; } .nav{ overflow: hidden; } .nav ul li{ list-style-type: none; float: left; } .nav ul li a{ text-decoration: none; display: block; padding: 10px 20px; color: #fff; } .nav ul li a:hover{ background: #fff; color: #f00; border-radius: 5px; } .nav ul li ul li{ float: none; background: #284f86; } .nav ul li ul{ position: absolute; display: none; } .nav ul li:hover ul{ display: block; } .a{ width: 100%; } </style> </head> <body> <nav> <div class="nav"> <ul> <li> <a href="">导航1</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航2</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航3</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航4</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> <li> <a href="">导航5</a> <ul> <li><a href="">导航二1</a></li> <li><a href="">导航二2</a></li> <li><a href="">导航二3</a></li> </ul> </li> </ul> </div> </nav> <div class="a">asdgfsdfhse</div> </body> </html>