很好看的黑色二级导航菜单代码
代码简介：
绝对酷的黑色风格的网站二级导航条，目前有很多网站都使用本导航条，用到有2个背景图片，请顺着代码地址自行下载。本菜单操作舒服，简洁漂亮，带三角导航，清楚导航用户当前的位置，提升你网站的用户体验。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>很好看的黑色二级导航菜单代码_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
img{ border:0; }
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}
a:link{ color:#000; text-decoration:none; }
a:visited{ color:#000; text-decoration:none; }
a:hover{ color:#000; text-decoration:none; }
.menu { height:59px;background:#474747 url(http://www.webdm.cn/images/20090919/sub_menu_bg.jpg) 0 34px repeat-x; width:969px;}
.menu ul{ margin:0; padding:0; }
.menu ul li{ float:left; height:33px; position:relative;}
.menu ul li a{cursor:pointer;border-top: #666 1px solid;padding:0 20px;float: left;color: #989898;line-height: 33px;margin-right: 2px;height:
33px;text-align: center;background: #363636;}
.menu ul li a:link{ color:#989898; text-decoration:none; }
.menu ul li a:visited{ color:#989898; text-decoration:none; }
.menu ul li a:hover{ color:#fff; border-top: #999 1px solid; background:#363636 url(http://www.webdm.cn/images/20090919/cx_menu_hover.jpg) center
bottom no-repeat ; }
.menu ul li div{ position: absolute; width:600px; left:10px;; top:34px;height:25px; display:none;}
.menu ul li div a{ float:none; display:inline; padding:0 10px;margin-right: 8px; background:none; border:none; line-height: 24px;}
.menu ul li div a:link,.menu ul li div a:visited{color:#444;}
.menu ul li div a:hover{ background:none; border:none;color:#000; text-decoration:underline;}
.menu ul .block div{ display:block;}
.menu a:hover.mbtn1,.menu .mbtn1ok,.menu mbtn1{ border-top: #ff8c00 1px solid; }
.menu a:hover.mbtn2,.menu .mbtn2{ border-top: #c71585 1px solid; }
.menu a:hover.mbtn3,.menu .mbtn3{ border-top: #66cdaa 1px solid; }
.menu a:hover.mbtn4,.menu .mbtn4{ border-top: #9acd32 1px solid; }
.menu a:hover.mbtn5,.menu .mbtn5{ border-top: #1e90ff 1px solid; }
-->
</style>
</head>
<body>
<div id="menu" class="menu">
<ul>
<li><a id="mbtn1" class="mbtn1ok" href="/">首 页</a></li>
<li><a id="mbtn2" href="">源码下载</a>
<div><a href="/">最新更新</a> <a href="/">下载排行</a> <a href="/">源码分类</a></div>
</li>
<li><a id="mbtn3" href="">ASP</a>
<div><a href="/">AJAX</a> <a href="/">聊天留言</a> <a href="/">CMS系统</a></div>
</li>
<li><a id="mbtn4" href="">PHP</a>
<div><a href="/">企业建站</a> <a href="/">AJAX相关</a></div>
</li>
<li><a id="mbtn5" href="">电子书籍</a>
<div><a href="">ASP书籍</a> <a href="">PHP书籍</a> <a href="">AJAX书籍</a></div>
</li>
<li><a href="http://www.webdm.cn">网页特效</a></li>
<li><a href="/">广告服务</a></li>
<li><a href="http://www.webdm.cn/">网站留言</a></li>
<li><a href="http://www.webdm.cn">友情链接</a></li>
<li><a href="http://www.webdm.cn">工具软件</a></li>
<li><a href="http://www.webdm.cn">English</a></li>
</ul>
</div>
<script type="text/javascript">
var menu = document.getElementById("menu");
var lis = menu.getElementsByTagName("li");
var las = menu.getElementsByTagName("a");
for(var i = 0; i < 6; i++)
{
lis[i].num = i;
lis[i].onmouseover = show;
}
function show()
{
var lias = lis[this.num].getElementsByTagName("a");
for(var i = 0; i < lis.length; i++)
{
lis[i].className = ""
}
for(var i = 0; i < las.length; i++)
{
las[i].className = ""
}
lis[this.num].className = "block";
lias[0].className = lias[0].id
}
</script>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/e9268301-bc08-4824-a76f-3a8e585af866.html
