这是我正在工作的网站: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%;
}
经过多次尝试和错误,我找到了如何在悬停在第二层上时显示第三层,但当我试图在第三层列表中选择某个内容时,它会消失。我知道我应该对一个元素应用悬停样式,这样当你们将鼠标悬停在它的子元素上时,它就会保持"悬停"状态,我以为我做到了,但它不起作用。我很想在这个问题上得到一些帮助。
试试这个: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%;
}
一个常见的错误是没有将嵌套的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>