先看效果(配色方便,还请多多包涵....^_^)
一种实现方式:(纯css伪类)
HTML代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <div id="nav" class="nav"> 2 <ul> 3 <li><a href="#">INDEX</a></li> 4 <li><a href="#">WEB</a> 5 <ul> 6 <li><a href="#">JS</a></li> 7 <li><a href="#">CSS</a></li> 8 <li><a href="#">HTML</a></li> 9 </ul> 10 </li> 11 <li><a href="#">APP</a> 12 <ul> 13 <li><a href="#">IOS</a></li> 14 <li><a href="#">Android</a></li> 15 <li><a href="#">WIN8</a></li> 16 </ul> 17 </li> 18 <li><a href="#">NET</a> 19 <ul> 20 <li><a href="#">APS.NET</a></li> 21 <li><a href="#">ADO.NET</a></li> 22 <li><a href="#">WCF</a></li> 23 </ul> 24 </li> 25 </ul> 26 </div>
CSS 代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.nav { width: 720px; background: #3B5998; height: 60px; color: white; margin: 8px auto; } .nav ul { list-style: none; margin: 0px; } .nav ul li { float: left; margin-right: 50px; position: relative; z-index: 100; width: 100px; text-align: center; margin-top: 12px; line-height: 30px; } .nav ul li a { text-decoration: none; font-weight: 700; background: #EEEEEE; display: block; height: 30px; } .nav ul li a:hover { background: none; color: #6F0; } .nav ul li ul { position: absolute; width: 100px; overflow: hidden; display: none; list-style: none; padding: 0px; background: none; } .nav ul li:hover ul { background-color: #EEEEEE; position: absolute; width: 100px; display: block; } .nav ul li ul li { border-bottom: 1px solid #BBB; text-align: left; width: 100%; margin: 0px; text-align: center; }
第二种方式(jq)
在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果,但IE6并不支持除超链接之外的元素使用这个伪类,因此使用上述的CSS代码并不能再IE6下正常运行,解决方法是用脚本来弥补这个不足。
1 $(function (){ 2 $("#nav ul li:has(ul)").hover(function (){ 3 $(this).children("ul").stop(true,true).slideDown(400); 4 },function (){ 5 $(this).children("ul").stop(true,true).slideUp("fast"); 6 }) 7 })
注意:
在两个动画效果之前都添加了stop(true,true)方法,这样做的好处是能把未执行的完的动画队列清空,并且将正在执行的动画跳转到末状态。