DIV+CSS二级导航菜单
这是一个DIV+CSS的二级导航菜单,问题是第二级菜单无法下拉,本人不确定问题出在哪儿,希望大家帮帮忙.
下面是关键部份代码,详细代码,页面请见附件.谢谢.
/* #Nav and select menu */
#nav {
float:left;
font-size:12px;
width:700px;
background:url(../img/nav_bg.gif) no-repeat;
padding:4px 15px 0 15px;
text-align:left;
}
#nav li {
float:left;
background:url(../img/nav_li_bg.gif) no-repeat 100% 50%;
position:relative;
}
#nav li.last { background:none;}
#nav li.p { background:none; }
#nav a, .select-menu li a, #super ul a {
display:block;
padding-left:5px;
color:#fff;
text-decoration:none;font-size:12px;
}
#nav a strong, #nav a strong {
display:block;
line-height:1.9em;
padding:0 12px .25em 5px;
white-space:nowrap;font-size:12px;
}
#nav li.over a, #nav a:hover {
background:url(../img/nav_over_left.gif) no-repeat;
color:#0088b5;
}
#nav li.over a strong, #nav a:hover strong {
background:url(../img/nav_over_right.gif) no-repeat 100% 0;
padding-right:10px;
padding-left:7px;
}
/* #Nav - second level */
#nav li.over ul a,
#nav li.over ul a:hover,
.select-menu li a,
#super ul a { /* De-style the 1st level*/
background:none;
padding:.25em 0;
}
#nav ul li { float:none; } /* De-style the 1st level*/
#nav ul { display:none; }
#nav li.over ul, .select-menu ul {
display:block;
position:absolute;
top:2.15em;
left:0;
width:14.17em;
background:url(../img/nav_sec_bg.png) no-repeat 0 100%;
padding-bottom:6px;
}
#nav ul li, #nav ul li.last, .select-menu li {
display:block;
background:url(../img/nav_sec_li_bg.png) repeat-y;
padding:0 1.08em;
}
#nav li.over ul a, .select-menu li a, #super ul a {
color:#34617e;
border-bottom:1px solid #e5e7e8;
}
#nav li.over ul a:hover, .select-menu li a:hover, #super ul a:hover {
color:#0088b5;
}
#nav ul li.last a, .select-menu li.last a, #super ul li.last a {
border:none;
}
[解决办法]
JS代码贴上来...
[解决办法]
<style type="text/css">
<!--
body{
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
font-size:14px;
color:#EFEFEF;
background-image:url(images/bg1.gif);
}
a{color:#EFEFEF;font-variant:normal;text-decoration:none;}
a:hover{text-decoration:none;color:#ff6600;}
a:active{text-decoration:underline;}
div{margin:auto;display:block;}
li{float:left;margin:0;padding:0;list-style-type:none;}
/*顶部banner的定义
-------------------------------------*/
#banner{background-image:url(images/bgpic.gif);width:76%;height:120px;}
/*菜单的定义
-------------------------------------*/
ul,li{margin:0; padding:0;list-style: none;}
#menu{height:36px;width:76%;margin:auto;background-image:url(images/menu.gif);position:relative;}
#menu li{float:left;width:76px;line-height:36px;text-align:center;position:relative;}
/*
#menu li *{height:auto;}
*/
#menu li ul a:hover{color:#ff6600;}
/*--使用通用选择器覆盖一级菜单样式--*/
#menu li ul *{
text-align:left;
padding-left:6px;
padding-right:6px;
line-height:22px;
width:130px;
color:#000000;
height:auto;
}
/*一级菜单
---------------------------------*/
#menu li ul{display:none;}
#menu li:hover ul,#menu li.over ul
{
display: block;
position: absolute;
top:36px;
left:0;
background:#92B9C2;
padding-right:6px;
width:130px;
}
/*二级菜单、三级菜单
---------------------------------*/
#menu li:hover ul ul,#menu li.over ul ul,#menu li:hover ul ul ul,#menu li.over ul ul ul{display:none;}
#menu li li:hover ul,#menu li li.over ul,#menu li li ul li:hover ul,#menu li li ul li.over ul
{
display: block;
position: absolute;
top:0px;
left:137px;
}
-->
</style>
</head>
<body>
<div id="banner"> </div>
<ul id="menu">
<li> <a href="#">菜单一 </a>
<ul>
<li> <a href="#">1.一级菜单一 </a>
<ul>
<li> <a href="#">1.1.二级菜单一 </a>
<ul>
<li> <a href="#">1.1.1.三级菜单一 </a> </li>
<li> <a href="#">1.1.1.三级菜单二 </a> </li>
<li> <a href="#">1.1.1.三级菜单三 </a> </li>
<li> <a href="#">1.1.1.三级菜单四 </a> </li>
<li> <a href="#">1.1.1.三级菜单五 </a> </li>
<li> <a href="#">1.1.1.三级菜单六 </a> </li>
<li> <a href="#">1.1.1.三级菜单七 </a> </li>
<li> <a href="#">1.1.1.三级菜单八 </a> </li>
<li> <a href="#">1.1.1.三级菜单九 </a> </li>
<li> <a href="#">1.1.1.三级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">1.1.二级菜单二 </a> </li>
</ul>
</li>
<li> <a href="#">1.一级菜单二 </a>
<ul>
<li> <a href="#">1.2.二级菜单一 </a> </li>
<li> <a href="#">1.2.二级菜单二 </a> </li>
<li> <a href="#">1.2.二级菜单三 </a>
<ul>
<li> <a href="#">1.2.3.三级菜单一 </a> </li>
<li> <a href="#">1.2.3.三级菜单二 </a> </li>
<li> <a href="#">1.2.3.三级菜单三 </a> </li>
<li> <a href="#">1.2.3.三级菜单四 </a> </li>
<li> <a href="#">1.2.3.三级菜单五 </a> </li>
<li> <a href="#">1.2.3.三级菜单六 </a> </li>
<li> <a href="#">1.2.3.三级菜单七 </a> </li>
<li> <a href="#">1.2.3.三级菜单八 </a> </li>
<li> <a href="#">1.2.3.三级菜单九 </a> </li>
<li> <a href="#">1.2.3.三级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">1.2.二级菜单四 </a> </li>
<li> <a href="#">1.2.二级菜单五 </a> </li>
<li> <a href="#">1.2.二级菜单六 </a> </li>
<li> <a href="#">1.2.二级菜单七 </a> </li>
<li> <a href="#">1.2.二级菜单八 </a> </li>
<li> <a href="#">1.2.二级菜单九 </a> </li>
<li> <a href="#">1.2.二级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">1.一级菜单三 </a> </li>
<li> <a href="#">1.一级菜单四 </a> </li>
<li> <a href="#">1.一级菜单五 </a> </li>
<li> <a href="#">1.一级菜单六 </a> </li>
<li> <a href="#">1.一级菜单七 </a> </li>
<li> <a href="#">1.一级菜单八 </a> </li>
<li> <a href="#">1.一级菜单九 </a> </li>
<li> <a href="#">1.一级菜单十 </a>
<ul>
<li> <a href="#">1.10.二级菜单一 </a> </li>
<li> <a href="#">1.10.二级菜单二 </a> </li>
<li> <a href="#">1.10.二级菜单三 </a> </li>
<li> <a href="#">1.10.二级菜单四 </a> </li>
<li> <a href="#">1.10.二级菜单五 </a> </li>
<li> <a href="#">1.10.二级菜单六 </a> </li>
<li> <a href="#">1.10.二级菜单七 </a> </li>
<li> <a href="#">1.10.二级菜单八 </a> </li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">菜单二 </a>
<ul>
<li> <a href="#">2.一级菜单一 </a>
<ul>
<li> <a href="#">2.1.二级菜单一 </a> </li>
<li> <a href="#">2.1.二级菜单二 </a> </li>
<li> <a href="#">2.1.二级菜单三 </a> </li>
<li> <a href="#">2.1.二级菜单四 </a> </li>
<li> <a href="#">2.1.二级菜单五 </a> </li>
<li> <a href="#">2.1.二级菜单六 </a> </li>
<li> <a href="#">2.1.二级菜单七 </a> </li>
<li> <a href="#">2.1.二级菜单八 </a> </li>
<li> <a href="#">2.1.二级菜单九 </a> </li>
<li> <a href="#">2.1.二级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">2.一级菜单二 </a> </li>
<li> <a href="#">2.一级菜单三 </a> </li>
<li> <a href="#">2.一级菜单四 </a> </li>
<li> <a href="#">2.一级菜单五 </a> </li>
<li> <a href="#">2.一级菜单六 </a> </li>
</ul>
</li>
<li> <a href="#">菜单三 </a> </li>
<li> <a href="#">菜单四 </a>
<ul>
<li> <a href="#">4.一级菜单一 </a> </li>
<li> <a href="#">4.一级菜单二 </a> </li>
<li> <a href="#">4.一级菜单三 </a> </li>
</ul>
</li>
<li> <a href="#">菜单五 </a>
<ul>
<li> <a href="#">5.一级菜单一 </a> </li>
<li> <a href="#">5.一级菜单二 </a> </li>
<li> <a href="#">5.一级菜单三 </a> </li>
<li> <a href="#">5.一级菜单四 </a> </li>
<li> <a href="#">5.一级菜单五 </a> </li>
<li> <a href="#">5.一级菜单六 </a> </li>
<li> <a href="#">5.一级菜单七 </a> </li>
<li> <a href="#">5.一级菜单八 </a> </li>
<li> <a href="#">5.一级菜单九 </a> </li>
<li> <a href="#">5.一级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">菜单六 </a> </li>
<li> <a href="#">菜单七 </a>
<ul>
<li> <a href="#">7.一级菜单一 </a> </li>
<li> <a href="#">7.一级菜单二 </a> </li>
<li> <a href="#">7.一级菜单三 </a> </li>
<li> <a href="#">7.一级菜单四 </a> </li>
<li> <a href="#">7.一级菜单五 </a> </li>
<li> <a href="#">7.一级菜单六 </a> </li>
<li> <a href="#">7.一级菜单七 </a> </li>
<li> <a href="#">7.一级菜单八 </a> </li>
<li> <a href="#">7.一级菜单九 </a> </li>
<li> <a href="#">7.一级菜单十 </a> </li>
</ul>
</li>
<li> <a href="#">菜单八 </a>
<ul>
<li> <a href="#">8.一级菜单一 </a> </li>
<li> <a href="#">8.一级菜单二 </a> </li>
<li> <a href="#">8.一级菜单三 </a> </li>
<li> <a href="#">8.一级菜单四 </a> </li>
<li> <a href="#">8.一级菜单五 </a> </li>
<li> <a href="#">8.一级菜单六 </a> </li>
<li> <a href="#">8.一级菜单七 </a> </li>
</ul>
</li>
<li> <a href="#">菜单九 </a> </li>
<li> <a href="#">菜单十 </a>
<ul>
<li> <a href="#">10.一级菜单一 </a> </li>
<li> <a href="#">10.一级菜单二 </a> </li>
<li> <a href="#">10.一级菜单三 </a> </li>
<li> <a href="#">10.一级菜单四 </a> </li>
<li> <a href="#">10.一级菜单五 </a> </li>
<li> <a href="#">10.一级菜单六 </a> </li>
<li> <a href="#">10.一级菜单七 </a> </li>
<li> <a href="#">10.一级菜单八 </a> </li>
<li> <a href="#">10.一级菜单九 </a> </li>
<li> <a href="#">10.一级菜单十 </a> </li>
</ul>
</li>
</ul>
<script language="javascript">
//start
startList = function() {
if (isFirefox=navigator.userAgent.indexOf("Firefox")>0) {
if (document.all&&document.getElementById) {//if start,No.1
navRoot = document.getElementById("menu");
for (i=0; i <navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}//onmouseover end
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}//onmouseout end
}//end if
}//eixt for
}//end if,No.1
}//end if
else{
var navRoot = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i <navRoot.length; i++) {
navRoot[i].onmouseover=function() {
this.className+=" over";
}
navRoot[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over"), "");
}
}//end for
}//end if
}
//end
window.onload=startList;
</script>
</body>
</html>
