案例-導航下拉

作者：曾慶林
html

<div class="nav" id="navigation">
       <ul>
         <li><a href="#">網(wǎng)站首頁</a></li>
         <li><a href="#">關(guān)于我們</a>
            <ul>
                <li><a href="#">企業(yè)文化</a></li>
                <li><a href="#">企業(yè)文化</a></li>
                <li><a href="#">企業(yè)文化</a></li>
            </ul>
         </li>
         <li><a href="#">新聞資訊</a></li>
         <li><a href="#">產(chǎn)品中心</a>
            <ul>
                <li>
                    <a>消防器材</a>
                    <ul>
                        <li><a href="#">照明系列</a></li>
                        <li><a href="#">防護系列</a></li>
                        <li><a href="#">破拆系列</a></li>
                        <li><a href="#">救生系列</a></li>
                        <li><a href="#">警戒系列</a></li>
                        <li><a href="#">其它系列</a></li>
                    </ul>
                </li>
                <li><a>工礦企業(yè)產(chǎn)品</a>
                     <ul>
                        <li><a href="#">照明系列</a></li>
                        <li><a href="#">機電設備系列 </a></li>
                        <li><a href="#">產(chǎn)品配件系列</a></li>
                    </ul>                                
                </li>
           </ul>            
         </li>
         <li><a href="#">招賢納士</a></li>
         <li><a href="#">客戶留言</a></li>
         <li><a href="#">聯(lián)系我們</a></li> 
       </ul>
     </div>

js

$(function(){
    //只要 li（有ul）被hover 讓里面的ul 下拉顯示
    //只要 li（有ul）被out  讓里面的ul 隱藏
    $("li:has(ul)").hover(function(){
        var myul=$(this).children("ul");
        if(myul.is(":animated")){
            myul.stop(true,true);
            // stop(停止到隊列動畫付枫，并回到最終狀態(tài))
        }
        myul.slideToggle()//第一次顯示 第二次隱藏急凰，第三次顯示
    })
    
    
})

ie6 瀏覽器不支持除a以外元素的:hover 事件
css

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dt,dl,dd{margin:0;padding:0;border:0;font-size:12px;font-family:"微軟雅黑";}
ul li{ list-style:none;}
.nav{ width:980px; height:34px;margin-top:23px; margin:0 auto; }
.nav ul{width:980px; height:34px; background: #069;}
.nav ul li{width:140px; height:34px; background:  #069; float:left; position:relative;}
.nav ul li a{width:140px; height:34px; line-height:34px; text-align:center; display:block; color:#FFF; font-size:14px; text-decoration:none;}
.nav ul li a:hover{ background-color:rgb(31,201,244);}
.nav ul li ul{ position:absolute; left:0px; top:34px; width:140px; height:auto; display:none; }
.nav ul li ul li{ float:none; position:relative;}
.nav ul li ul li ul{ left:140px; top:0px; width:140px;}