第三个子菜单不在次要子菜单中与选定菜单内嵌出现

Question

我有一个纯粹的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; } 

谢谢，杰克

Answer 1

据我所见，这是你的：

.fourth-level-menu 
{ 
    top: 0px; 
} 

如果您将top属性更改为60px它适用于我。

希望这可以帮助你。

编辑

现在好了。如果添加第四级选项

.third-level-menu > li { position: relative; }

现在，他们接下来将显示第三级菜单的:hover选项：你必须在三级菜单里的位置设置为相对。

希望这是您搜索的内容。