0

这是我正在处理的网站：http : //argumentinamerica.com 这是我正在处理的菜单的文件：http: //jsfiddle.net/Qtfrq/

HTML：

<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 class="thirdtier">
                <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: .65em;
    color: ffcc66;
}
#menu .has-sub ul li a:hover,
 #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:hover + ul {
    display: list-item;
}
.thirdtier li {
    left: 100%;
}

经过多次反复试验，当我将鼠标悬停在第二层上时，我想出了如何让第三层出现，但是当我尝试在第三层列表中选择某些东西时，它消失了。我知道我应该将悬停样式应用于 a 元素，以便当您将鼠标悬停在其子元素上时它保持“悬停”状态，我以为我这样做了，但它不起作用。我很想在这个问题上得到一些帮助。

4

2 回答 2

0

一个常见的错误是没有将嵌套的 UL 放在其父 LI 中（顺便说一下，这会导致 HTML 无效）。因为这些 UL 不是具有悬停状态的 LI 的一部分，所以它们不保持可见性。

在这种情况下，您的第二级有效，因为您根本没有关闭 LI 标记。因此，浏览器通过查看下一个兄弟 LI 来猜测它应该关闭的位置。

你可能需要重新设计你的 CSS，但它应该是这样的：

<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>
                <ul class="thirdtier">
                    <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>
            <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>
    <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>
于 2013-02-13T16:14:11.057 回答
0

试试这个：http: //jsfiddle.net/Qtfrq/2/

基本上对您的 HTML 和 CSS 进行了一些小改动。

<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>
                <ul class="thirdtier">
                    <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>
            <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>
    <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>


#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: .65em;
    color: ffcc66;
}

#menu .has-sub ul li a:hover,
#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:hover + ul {
    display: list-item;
}

.thirdtier {
    top: 0;

}

.thirdtier li {
  left: 100%;
}
于 2013-02-13T16:38:02.990 回答