JQ-CSS-实现导航菜单效果

先看效果（配色方便，还请多多包涵....^_^）

   

  一种实现方式：（纯css伪类）

  HTML代码：

<div id="nav" class="nav">
  <ul>
    <li><a href="#">INDEX</a></li>
    <li><a href="#">WEB</a>
      <ul>
        <li><a href="#">JS</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
      </ul>
    </li>
    <li><a href="#">APP</a>
      <ul>
        <li><a href="#">IOS</a></li>
        <li><a href="#">Android</a></li>
        <li><a href="#">WIN8</a></li>
      </ul>
    </li>
    <li><a href="#">NET</a>
      <ul>
        <li><a href="#">APS.NET</a></li>
        <li><a href="#">ADO.NET</a></li>
        <li><a href="#">WCF</a></li>
      </ul>
    </li>
  </ul>
</div>

  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;
}

   第二种方式（jq）

 在IE7和FireFox浏览器上可以使用伪劣:hover来显示导航效果，但IE6并不支持除超链接之外的元素使用这个伪类，因此使用上述的CSS代码并不能再IE6下正常运行，解决方法是用脚本来弥补这个不足。

  

  $(function (){
      $("#nav ul li:has(ul)").hover(function (){
      $(this).children("ul").stop(true,true).slideDown(400);
      },function (){
      $(this).children("ul").stop(true,true).slideUp("fast");
    }) 
  })

  注意：

   在两个动画效果之前都添加了stop(true,true)方法，这样做的好处是能把未执行的完的动画队列清空，并且将正在执行的动画跳转到末状态。