CSS疊加順序 - 如何得到這個權利？

我已經寫了下面的代碼來幫助我理解CSS堆疊順序，但是我被卡住了。在下面的頁面中，當我將鼠標懸停在「Three」（id = link_three）鏈接上時，我想要出現子菜單。出現子菜單，但菜單欄變得扭曲，因爲子菜單沒有堆疊在菜單欄的其餘部分之上。這裏的堆疊上下文和堆疊順序是什麼？什麼是使子菜單出現在上一級的正確方法？CSS疊加順序 - 如何得到這個權利？

<html> 
<head> 
<style> 
<!-- 
* { 
    padding: 0; 
    border: 0; 
    margin: 0; 
} 

.menubar_ul { 
    list-style: none; 
} 

.menubar_ul_li,.menubar_ul_li_menu { 
    float: left; 
    padding: 0 10px 0 10px; 
} 

.menu_ul { 
    list-style: none; 
    display: none; 
} 

.menu_ul_li { 

} 

#link_three:hover>#menu_three { 
    display: block; 
} 
--> 
</style> 
</head> 
<body> 
    <ul id="top_menubar" class="menubar_ul"> 
     <li class="menubar_ul_li" id="link_one">One</li> 
     <li class="menubar_ul_li" id="link_two">Two</li> 
     <li class="menubar_ul_li_menu" id="link_three"><a href="#">Three</a> 
      <ul class="menu_ul" id="menu_three"> 
       <li class="menu_ul_li" id="menuitem_one">One</li> 
       <li class="menu_ul_li" id="menuitem_two">Two</li> 
       <li class="menu_ul_li" id="menuitem_three"> 
       <!-- This is intentional: --> 
       Threeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</li> 
       <li class="menu_ul_li" id="menuitem_four">Four</li> 
       <li class="menu_ul_li" id="menuitem_five">Five</li> 
       <li class="menu_ul_li" id="menuitem_six">Six</li> 
      </ul></li> 
     <li class="menubar_ul_li" id="link_four">Four</li> 
     <li class="menubar_ul_li" id="link_five">Five</li> 
     <li class="menubar_ul_li" id="link_six">Six</li> 
    </ul> 
</body> 
</html>

來源

2014-02-16 Computer

只需添加「的位置是：絕對」或設置寬度#menu_three http://jsfiddle.net/judearasu/v2eHs/ –

<!-- Just add "position:absolute;" to your css, this is going to be then --> 

#link_three:hover>#menu_three { 
    display: block; 
    position:absolute; 
}

來源

2014-02-16 07:15:47 Adel

是做到了。謝謝 – Computer

你能否點擊向上箭頭（評級）如果有用，謝謝.. – Adel

我做了但我沒有15聲望 – Computer

CSS疊加順序 - 如何得到這個權利？

回答

相關問題