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

2024-09-05 12:20:13

字体：大中小

来源：转载

供稿：网友

虽简单，但实用的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>主页     <ul>        <li>最新更新</li>        <li>分类导航</li>        <li>最新更新</li>     </ul>  </li>  <li>源码导航     <ul>        <li>ASP</li>        <li>PHP</li>        <li>JSP</li>        <li>AJAX</li>        <li>JQUERY</li>        <li>DELPHI</li>     </ul>  </li><li>网站服务     <ul>        <li>友情链接</li>        <li>广告合作</li>     </ul>  </li></ul></div><p><hr></body></html>

上一篇：新浪博客左侧的Blog管理菜单

下一篇：横向滑动特效的菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注