css+js导航菜单效果
本身是有这个例子的，但是2级菜单定位都靠最左边，
于是就按照原有的样式和效果重新写了页面结构和js
运行代码框<!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" /> <meta http-equiv="content-language" content="zh-cn" /> <meta name="robots" content="all" /> <meta name="keywords" content="关键字描述" /> <meta name="description" content="站点描述" /> <meta name="author" content="顾振宇,zy.e@163.com" /> <meta name="copyright" content="版权所有" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="bookmark" href="/favicon.ico" type="image/x-icon" /> <title>css+js导航菜单效果-w3css.com</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(/img/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.w3css.com/img/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="">连接AAA</a> <a href="">连接BBB</a> <a href="">连接CCC</a></div> </li> <li><a id="mbtn3" href="">企业邮箱</a> <div><a href="">连接AAA</a> <a href="">连接BBB</a> <a href="">连接CCC</a></div> </li> <li><a id="mbtn4" href="">空间租用</a> <div><a href="">连接DDD</a> <a href="">连接EEE</a> <a href="">连接FFF</a></div> </li> <li><a id="mbtn5" href="">网页制作</a> <div><a href="">连接GGG</a> <a href="">连接HHH</a> <a href="">连接III</a></div> </li> <li><a href="">网站开发</a></li> <li><a href="">网站推广</a></li> <li><a href="">中聚客户</a></li> <li><a href="">客服中心</a></li> <li><a href="">关于我们</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> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
