Question

我有一个适用于第一级的下拉菜单。但我无法显示菜单的第二级。谢谢你的帮助。

的javascript

<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show submenu
$('ul', this).css({zIndex:90}).fadeIn(150);
},
function () {
//hide submenu
$('ul', this).fadeOut(150);

}
);

HTML

<input type="hidden" name="arav" /><ul id="nav">
<li> <a href="index2.html">Home</a>
</li>
<li> <a href="personnel.html">Who We Are</a>
</li>
<li> <a href="#">Neurologic Condition</a>
<ul>
<li><a href="sci.html">SCI</a></li>
<li><a href="tbi.html">TBI</a></li>
<li><a href="stroke.html">Other</a></li>
</ul>
</li>
<li> <a href="">Education</a>
<ul>
<li><a href="healthed.html">Health Education</a></li>
<li><a href="#"> Materials</a>
<ul>Videos
<li>Videos</li>
<li>Presentation</li>
<li>Movies</li>
</ul>

</li>

<li><a href="sciinfosheets.html">SCI Info Sheets</a></li>
</ul>
</li>
<li> <a href="stroke.html">Resources</a>
<ul>
<li><a href="statelevel.html">State Level</a></li>
<li><a href="nationallevel.html">National Level</a></li>
<li><a href="resourcesbycoutny2.html">Community Level</a></li>
</ul>
</li>

<li> <a href="research.html">Research</a></li>

<li> <a href="contactus.html">Contact Us</a>
</li>
</ul>

CSS

#nav {
margin:0;
padding:0;
list-style:none;
behavior: url(border-radius.htc);

}

/*LI display inline */
#nav li {
float:left;
display:block;
width:7em;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
}

/*parent menu*/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#696969;
text-align:center;
color:#ffeecc;
}

#nav li a:hover
{
color:#eeeeee;
}

/* style for default selected value */ #nav a.selected {
color:#6699FF;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}

#nav ul li
{
width:7em;
float:left;
overflow:hidden;
border-top:1px solid #eeeeee;
}

#nav ul a
{
display:block;
height:32px;
padding: 7px 4px;
color:white;
}

#nav ul a:hover
{
text-decoration:none;
}

Answer 1

这可能只是你的html问题：

<li><a href="#"> Materials</a>
<ul>Videos                 // this is not valid
<li>Videos</li>

无效的HTML。

你有在线的例子吗？

修改：我在jsfiddle添加了一个示例。

我遇到的第一个问题是您使用#nav ul li { overflow: hidden }。这意味着将隐藏所有溢出li的内容（如子子菜单）。除此之外，您还必须为最低级菜单添加一些定位。

Answer 2

它仍然需要一些整理，但是高级菜单没有显示的问题是#nav ul li设置了overflow:hidden，无论什么隐藏在高级菜单中。删除它可以解决问题。我也在下面的演示中稍微调整了JS。

演示： jsfiddle.net/Marcel/kydTs

Answer 3

除了上面提到的HTML错误之外，CSS也没有完成，你已经将所有子列表定位为向左齐平..所以它们实际上只是在彼此的顶部加上你有了孩子的li设置为overflow: hidden;，这样他们的孩子也会隐藏

jQuery稍微有些错误，当第一个列表被徘徊时，它会立即丢弃所有的孩子li，我猜你只想在它的直接父母被徘徊时出现？

修改CSS：

#nav {
margin:0;
padding:0;
list-style:none;
behavior: url(border-radius.htc);
}

#nav {width: 100%;}
#nav ul, #nav li {width: 7em;}

/*LI display inline */
#nav li {
float:left;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
text-align:center;
}

/*parent menu*/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#ffeecc;
}

#nav li a:hover {
color:#eeeeee;
}

/* style for default selected value */ 
#nav a.selected {
color:#6699FF;
}
/* submenu */ 
#nav ul {
position:absolute;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}

#nav ul {left: 0;}
#nav ul ul {left: 100%; top: 0;}

#nav ul li {
/*overflow:hidden;*/
border-top:1px solid #eeeeee;
}

#nav ul li:hover {position: relative;}

#nav ul a {
display:block;
height:32px;
padding: 7px 4px;
color:white;
}

#nav ul a:hover {
text-decoration:none;
}

修改过的剧本：

<script type="text/javascript">
$(document).ready(function() {

    $("#nav li").hover(
        function () {
        $(this).children("ul").fadeIn(250);
        },function(){
        $(this).children("ul").fadeOut(250);
    });//hover

});// document ready
</script>

多级下拉菜单无法正常工作

3 个答案: