虽简单，但实用的CSS二级展开导航栏_菜单导航特效

织梦DedeCMS视频教程买空间租服务器选网硕互联！ 无忧站长工具,百度权重一键全查!

虽简单，但实用的CSS二级展开导航栏，演示只显示了三个菜单项，你可以随意扩展下往，本菜单纯CSS结构，条例W3C标准，兼容多浏览器，颜色温顺，相信不少朋友会喜欢的。

<html>
<head>
<title>二级展开导航栏</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="#">分类导航</a></li>
        <li><a href="#">最新更新</a></li>
     </ul>
  </li>
  <li><a href="#">源码导航</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="#">网站服务</a>
     <ul>
        <li><a href="#">友情链接</a></li>
        <li><a href="#">广告合作</a></li>
     </ul>
  </li>
</ul>
</div>
<p><hr>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-03

[收藏][报错][返回列表]

虽简单，但实用的CSS二级展开导航栏_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些

收藏&分享