創想工作室

最近幫一客戶做網站，為了版面整潔，需要用到JS下拉菜單。在網上找了很久都沒有找到自己滿意的，最好自己找到一個然后修改了一下，還是不錯的，現在發出來給有需要的人。效果如下：

第一步：把下面的代碼放在</head>前面；

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>

第二步：導航代碼如下；

    <div id="menu"> //注意這里的menu要跟上面的一致；
  <ul>
            <li><a id="current" href="/index.html" target="_top">網站首頁</a></li>
            <li><a href="/aboutus.html" target="_top">關于我們</a>
                <ul style="z-index:999">
     <li><a href="/aboutus.html" target="_self">公司簡介</a></li>
                    <li><a href="/culture.html" target="_self">企業文化</a></li>
     <li><a href="/Awards.html" target="_self">榮譽證書</a></li>
                    <li><a href="/job.html" target="_self">人才招聘</a></li>
                    <li><a href="/contact.html" target="_self">聯系方式</a></li>
                </ul>
   </li>
   <li><a href="/case/" target="_top">成功案例</a>
                <ul style="z-index:998">
     <li><a href="/case/edu_1.html" target="_self">教育</a></li>
                    <li><a href="/case/medical_1.html" target="_self">醫療</a></li>
                    <li><a href="/case/government_1.html" target="_self">政府</a></li>
     <li><a href="/case/company_1.html" target="_self">企業</a></li>
    </ul>
   </li>
            <li><a href="/solutions/" target="_top">解決方案</a>
                <ul style="z-index:998">
     <li><a href="/solutions/network_1.html" target="_self">網絡</a></li>
                    <li><a href="/solutions/machine_room_1.html" target="_self">機房</a></li>
                    <li><a href="/solutions/Serv_Cabling_1.html" target="_self">綜合布線</a></li>
    </ul>
   </li>
            <li><a href="/news/" target="_top">新聞中心</a>
                <ul style="z-index:997">
     <li><a href="/news/company_1.html" target="_self">公司新聞</a></li>
                    <li><a href="/news/industry_news_1.html" target="_self">行業新聞</a></li>
    </ul>
   </li>
            <li><a href="#" target="_top">支持與下載</a></li>
            <li><a href="/product/" target="_top">產品介紹</a>
                <ul style="z-index:998">
     <li><a href="/product/router_1.html" target="_self">路由器</a></li>
                    <li><a href="/product/switch_1.html" target="_self">交換機</a></li>
                    <li><a href="/product/firewall_1.html" target="_self">防火墻</a></li>
    </ul>
            </li>
            <li><a href="/contact.html" target="_top">聯系我們</a></li>
        </ul>
    </div>

最后是CSS樣式表代碼。

#menu { clear:both; float:left; height:35px; background:url(menu_bj.gif) repeat-x; text-align:center; border-bottom:3px #E3E3E3 solid; margin-bottom:5px; width:950px; }
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; font-weight:bold; }
#menu ul li a { display:block; width:116px; height:35px; line-height:35px; text-align:center; color:#FFF; text-decoration:none; background:url(menu_line.gif) left center no-repeat; }
#menu ul li a:hover { color:#FF0; }
#menu ul li a#current { background-image:none; }
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute; }
#menu ul li ul li { float:none; width:116px; background:#eee; margin:0; }
#menu ul li ul li a { background:none; color:#333; width:116px; }
#menu ul li ul li a:hover { background:#333; color:#fff; }
#menu ul li:hover ul { display:block; }
#menu ul li.sfhover ul { display:block; }