绝对酷的黑色风格二级导航菜单

sl514

浏览: 27817 次
性别:
来自: 北京

最近访客更多访客>>

wangyy

18321556453

suncong1024

Daemon_Fan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!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>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<title>css+js导航菜单</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:"&nbsp;";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.codefans.net/jscss/demoimg/200905/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.codefans.net/jscss/demoimg/200905/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="http://www.codefans.net/">首 页</a></li>
<li><a id="mbtn2" href="">源码下载</a>
<div><a href="/other/lastupdate.shtml">最新更新</a> <a href="/other/top100.shtml">下载排行</a> <a href="/sort/index.shtml">源码分类</a></div>
</li>
<li><a id="mbtn3" href="">ASP</a>
<div><a href="/sort/list_1_87_1.shtml">AJAX</a> <a href="/sort/list_1_11_1.shtml">聊天留言</a> <a href="/sort/list_1_29_1.shtml">CMS系统</a></div>
</li>
<li><a id="mbtn4" href="">PHP</a>
<div><a href="/sort/list_2_35_1.shtml">企业建站</a> <a href="/sort/list_2_185_1.shtml">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="/jscss/">网页特效</a></li>
<li><a href="/service/ad.shtml">广告服务</a></li>
<li><a href="/guestbook/">网站留言</a></li>
<li><a href="/service/links.shtml">友情链接</a></li>
<li><a href="/sort/list_6_1.shtml">工具软件</a></li>
<li><a href="">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>