虽简单，但实用的CSS二级展开导航栏 - :::::::网络早市:::::::www.xiapiaoxue.com/bbs

【首页】→ 【建站杂谈】→ 主题：虽简单，但实用的CSS二级展开导航栏

字体：大中小评论

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

发表：whjsqb (2009-7-21 9:39:06)

分类：建站杂谈 | 阅读：8204 | 评论：0 | 最新评论：2009-7-21 9:39:06 By

虽简单，但实用的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>

·上一篇：JavaScript多种方式的弹出窗口代码 ·下一篇：彻底关闭445端口

评论 | 引用

本文共0条评论

[返回]