0
我有一个纯粹的HTML和CSS菜单栏,需要三个子菜单分支出来。当你运行我已经得到的第一个两个子菜单形式时,无论菜单选项是悬停在哪里,但第三个总是出现在辅助子菜单的顶部。我无法找到第二个菜单的第三个顶部。有任何想法吗?第三个子菜单不在次要子菜单中与选定菜单内嵌出现
**注:我指的是菜单的子菜单第三,但是在CSS它被称为第四级菜单
HTML
<ul class="top-level-menu">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li>
<a href="#">Offices</a>
<ul class="second-level-menu">
<li><a href="#">Chicago</a></li>
<li><a href="#">Los Angeles</a></li>
<li>
<a href="#">New York</a>
<ul class="third-level-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Book a Meeting</a></li>
<li>
<a href="#">Testimonials</a>
<ul class="fourth-level-menu">
<li><a href="#">Test</a></li>
</ul>
</li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Seattle</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
CSS
/* Menu Styles */
.fourth-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.fourth-level-menu > li
{
height: 30px;
background: #999999;
}
.fourth-level-menu > li:hover { background: #CCCCCC; }
.third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
谢谢,杰克
这只会将它设置为与下层菜单选项齐平,我需要它自动排除位于任何子菜单选项所在的位置旁边的位置,就像第三级菜单为第二级菜单所做的那样。 –
修好了!非常感谢! –