兼容IE/火狐的蓝色CSS多级导航栏
看上去挺不错的CSS两级下拉菜单，兼容IE/火狐等多种浏览器，符合WEB标准，菜单天蓝色风格，鼠标移过菜单，会更换菜单背景，本菜单适合于大多数网站，因些总体还是不错的。
当前位置：编程学习 > JS >>
答案：<html>
<head>
<title>兼容IE/火狐的蓝色CSS多级导航栏</title>
<style>
body{font-size:12px; font-family:"宋体";margin:0;padding:0;}
#menu {height:29px!important;height:30px;line-height:29px;list-style-type: none;background:#B5DCF9;}
#menu a {display: block; width: 80px; text-align:center;}
#menu a:link {color:#000; text-decoration:none;}
#menu a:visited {color:#000;text-decoration:none;}
#menu a:hover {color:#FFF;text-decoration:none;font-weight:bold;}
#menu li {float: left; width: 80px; border-right:1px solid #fff;}
#menu li a:hover{background:#6699ff;}
#menu li ul {line-height: 25px; list-style-type: none;text-align:left;left: -1860em; width: 180px; position: absolute;top:15px!important;top:29px;}
#menu li ul li{float: left; width: 130px;background: #6699ff;border-top:1px solid #fff}
#menu li ul a{display: block; width:120px!important;width: 130px;text-align:left;padding-left:10px;}
#menu li ul a:link {color:#fff; text-decoration:none;}
#menu li ul a:visited {color:#fff;text-decoration:none;}
#menu li ul a:hover {color:#000;text-decoration:none;font-weight:normal;background:#B5DCF9;}
#menu li:hover ul {left: auto;}
#menu li.sfhover ul {left: auto;}
#content {clear: left;}
</style>
<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>
</head>
<body>
<div id="menu">
<li><a href="#">回到首页</a></li>
<ul>
<li>
<a href="#">更新汇总</a>
<a href="#">热门排行</a>
</li>
</ul>
<li><a href="/jscss">网页特效</a>
<ul>
<li>
<a href="#">菜单导航</a>
<a href="#">层和布局</a>
<a href="#">表单按钮</a>
</li>
</ul>
</li>
<li><a href="#">代码资源</a>
<ul>
<li>
<a href="#">ASP源码</a>
<a href="#">PHP源码</a>
<a href="#">JSP源码</a>
</li>
</ul>
</li>
<li><a href="/">电子书籍</a>
<ul>
<li>
<a href="#">AJAX书籍</a>
<a href="#">EXT类</a>
<a href="#">JQUERY</a>
</li>
</ul>
</li>
<li><a href="#">其它杂项</a>
<ul>
<li>
<a href="#">网站留言</a>
<a href="#">广告业务</a>
</li>
</ul>
</li>
</div>
</body>
</html>上一个：四个角都为弧形的纯CSS圆角导航栏
下一个：CSS+XHTML极酷导航菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。