先看效果（配色方便，还请多多包涵....^_^）
一种实现方式：（纯css伪类）
HTML代码：
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="#"></a></li>21 <li><a href="#"></a></li>22 <li><a href="#">WCF</a></li>23 </ul>24</li>25 </ul>26 </div>
View Code
CSS 代码：
.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;}
View Code
第二种方式（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)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。
如果觉得《JQ-CSS-实现导航菜单效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
