Question

我的问题在于我创建的菜单上的列表。

我希望它设置为当我将鼠标悬停在菜单项上时，列表显示在下方！我还有一个列表中的另一个部分，它有一个子列表，我想在将鼠标悬停在它上面时显示。

我的问题是当我将鼠标悬停在菜单按钮上时，两个列表都显示出来。任何人都可以帮我解决这个问题吗？多谢你们。

    <li><a href="/specialityservices/criticalcare.php" accesskey="4" title="">SPECIALTY SERVICE &nbsp;|</a>
                   <ul>
                   <li><a href="/specialityservices/criticalcare.php">Critical Care</a></li>
                   <li><a href="/specialityservices/internalmedicine.php">Internal Medicine</a></li>
                   <li><a href="/specialityservices/surgery.php">Surgery</a></li>
                   <li><a href="/specialityservices/rehab.php">;Rehab</a>
                          <ul>
                          <li><a href="/specialityservices/rehab.php">Rehab 101</a></li>
                          <li><a href="/specialityservices/whattoexpect.php">What To Expect</a></li>
                          <li><a href="/specialityservices/services.php">&nbsp;Services</a></li>
                          <li><a href="/specialityservices/conditionstreated.php">Conditions Treated</a></li>
                          <li><a href="/specialityservices/catscorner.php">Cat's Corner</a></li>
                          </ul>
                        </li>
                   </ul>
            </li>

CSS

#menu {
height: 60px;
background: url(images/subpage1_02.gif) no-repeat left top;
font-family: 'Kameron', serif; 
}

ul {
z-index: 4;
font-family: 'Kameron', serif;
font-size: 15px;
margin: 0;
padding: 0px;
padding-left: 18px;
list-style: none;
}

ul li {
z-index: 5;
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
z-index: 6;
display: block;
text-decoration: none;
color: #ffffff;
padding: 18px 0px 0px 0px;
background: none;
margin-left: 6px;
white-space: nowrap;
}
ul li a:hover {
z-index: 7;
color: #732B36;
background: none;
}
li:hover ul {
z-index: 8;
display: block;
position: absolute;
}
li:hover li {
z-index: 9;
float: none;
font-size: 11px;
}
li:hover a {
z-index: 10;
background: #3d3d3d;
}
li:hover li a:hover {
z-index: 11;
background: white;
}

Answer 1

您最大的问题是，您需要使用直接子选择器>作为下拉显示（将其从display:none更改为display:block的部分）

Demo

我还删除了不必要的属性，添加了空格，并更正确地格式化了HTML

Answer 2

您还可以在悬停时将子级导航放在div和转换max-height中。我发现这个解决方案非常有效。

演示：http://jsfiddle.net/8NW4v/

显示列表时出现问题 - 样式

2 个答案: