日期:2014-5-17 浏览次数:20095次

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代码贴上来...
------解决方案--------------------
HTML code
 
<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;