第三個子菜單不在次要子菜單中與選定菜單內嵌出現

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選項：你必須在三級菜單裏的位置設置爲相對。

希望這是您搜索的內容。