雖簡單，但實用的CSS二級展開導(dǎo)航欄_菜單導(dǎo)航特效

雖簡單，但實用的CSS二級展開導(dǎo)航欄，演示只顯示了三個菜單項，你可以隨意擴(kuò)展下往，本菜單純CSS結(jié)構(gòu)，條例W3C標(biāo)準(zhǔn)，兼容多瀏覽器，顏色溫順，相信不少朋友會喜歡的。

<html>
<head>
<title>二級展開導(dǎo)航欄</title>
<style type="text/css">
.menu{MARGIN: 0px;WIDTH: 750px;FONT-FAMILY: arial, sans-serif; position:relative; z-index:9}
.menu ul{list-style-type:none; position:absolute;}
.menu ul li{float:left;}
.menu ul li ul {MARGIN: 0px;}
.menu ul li ul li{float:none;}
.menu ul li ul{display:none;}
.menu ul li a{BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-SIZE: 11px; BACKGROUND: #c9c9a7; BORDER-LEFT: #fff 0px solid; WIDTH: 80px; COLOR: #000; LINE-HEIGHT: 20px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 15px; TEXT-ALIGN: center; TEXT-DECORATION: none}
.menu ul li a:hover {BACKGROUND: #b3ab79; COLOR: #fff}
.menu ul li.sfhover ul{display:block;}
.menu ul li.sfhover ul li a{BACKGROUND: #faeec7; COLOR: #000;}
.menu ul li.sfhover ul li a:hover{BACKGROUND: #dfc184; COLOR: #000;}
hr{position:relative; z-index:1}
</style>
<script type=text/javascript>
function menuFix() {
    var sfEls = document.getElementById("nav").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>
</head>
<body>
<div class="menu" id="nav">
<ul>
  <li><a href="#">主頁</a>
     <ul>
        <li><a href="#">最新更新</a></li>
        <li><a href="#">分類導(dǎo)航</a></li>
        <li><a href="#">最新更新</a></li>
     </ul>
  </li>
  <li><a href="#">源碼導(dǎo)航</a>
     <ul>
        <li><a href="#">ASP</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">JSP</a></li>
        <li><a href="#">AJAX</a></li>
        <li><a href="#">JQUERY</a></li>
        <li><a href="#">DELPHI</a></li>
     </ul>
  </li>
<li><a href="#">網(wǎng)站服務(wù)</a>
     <ul>
        <li><a href="#">友情鏈接</a></li>
        <li><a href="#">廣告合作</a></li>
     </ul>
  </li>
</ul>
</div>
<p><hr>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時間：2012-11-03

[收藏][報錯][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索雖簡單，但實用的CSS二級展開導(dǎo)航欄
特效說明：
菜單導(dǎo)航模板-雖簡單，但實用的CSS二級展開導(dǎo)航欄。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

雖簡單，但實用的CSS二級展開導(dǎo)航欄_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些