-1

这是我正在开发的网站：http: //argumentinamerica.com/

菜单是这样的：

<div id="menu">
<ul id="menu">
    <li><a href="#"><span></span>Home</a></li>
    <li class='has-sub'><a href="#"><span></span>Units</a>
        <ul>
            <li class='has-sub'><a href="#">Unit 1</a></li>
                <ul>
                    <li><a href="#">Read About It</a></li>
                    <li><a href="#">Write About It</a></li>
                    <li><a href="#">Hear About It</a></li>
                    <li><a href="#">Speak About It</a></li>
                    <li><a href="#">Read About It</a></li>
                    <li><a href="#">Write About It</a></li>
                </ul>
            <li class='has-sub'><a href="#">Unit 2</a></li>
            <li class='has-sub'><a href="#">Unit 3</a></li>
            <li class='has-sub'><a href="#">Unit 4</a></li>
            <li class='has-sub'><a href="#">Unit 5</a></li>
        </ul>
    <li><a href="#"><span></span>Teacher Center</a></li>
    <li><a href="#"><span></span>About</a></li>
    <li><a href="#"><span></span>Give 1</a></li>
</ul>
</div>

CSS是这样的：

#menu {
margin: 0; padding: 2px 0px 2px 0px;
list-style-type: none;
height: 2.4em;
}
#menu ul, #menu li, #menu span, #menu a {
    margin: 0;
    padding: 0;
    position: relative;
}
#menu li {
float: left;
width: 20%;
}
#menu a {
display: block;
margin: 1px;
height: 2.4em;
font-size: 10px;
line-height: 2.4em;
text-decoration: none;
text-transform: uppercase;
text-align: center;
background: #ffcc66;
color: #996600;
}
#menu span {
position: absolute; top: 8px; left: 8px;
width: 8px; height: 8px;
background: #ff9933;
}
#menu a:hover {
background: #cc3300;
color: #ffcc66;
}

#menu ul{
list-style-type: none;
}
#menu .has-sub {
    z-index: 1;
}
#menu .has-sub:hover > ul {
    display: list-item;
}
#menu .has-sub ul {
    display: none;
    position: absolute;
    left:0;
}
#menu .has-sub ul li {
    *margin-bottom: -1px;
    position: relative;
    width: 100%;
    height: 2.6em;
    line-height: 2.4em;
}
#menu .has-sub ul li a {
    background: #ff9944;
    font-size: 11px;
    color: ffcc66;
}
#menu .has-sub ul li:hover a {
    background: #ff6633;
    color: 993300;
}
#menu .has-sub {
    z-index: 1;
}
#menu .has-sub:hover > ul {
    display: list-item;
}
#menu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left:0;
}
#menu .has-sub .has-sub ul {
    display: none;
    position: absolute;
    left:0;
}
#menu .has-sub .has-sub ul li {
    *margin-bottom: -1px;
    position: relative;
    width: 100%;
    height: 2.6em;
    line-height: 2.4em;
}
#menu .has-sub .has-sub ul li a {
    background: #ff9944;
    font-size: 11px;
    color: ffcc66;
}
#menu .has-sub .has-sub:hover > ul {
    display: block;
}
#menu .has-sub .has-sub ul li:hover a {
    background: #ff6633;
    color: 993300;
}

第三层在 Units: Unit 1 下。

我查看了Displaying third tier submenus proper with css only menu and https://stackoverflow.com/questions/13775342/adding-third-tier-to-drop-down-menu和DropDown Menu won't to display on hover and a许多其他问题试图找出问题所在，但我仍然无法显示第三层。我真的很感激有人看一看并告诉我我错过了什么。

4

1 回答 1

1

首先，导致第三层出现的 CSS 不正确： #menu .has-sub .has-sub:hover > ul { display: block; } 在此代码中，“>”针对的ul是元素的直接子.has-sub:hover元素 - 在您的 HTML 中，第三层 ul 不是元素的子li.has-sub元素。您可以将 > 更改为 +，这意味着它的目标是紧跟在此代码中会导致第三层出现的ul元素之后的元素。li.has-sub下一个问题是第三层项目直接出现在第二层下方，因此需要将它们移动到某个地方 - 请参见示例代码。

http://codepen.io/nztim/pen/GpbqK

现在，当您将鼠标悬停在第三层时，您需要让菜单保持可见，但我会把它留给您，祝您一切顺利:)

于 2013-02-13T03:51:09.127 回答