位置子菜單不工作在IE/FF

Question

我有菜單的兩層 - 與另一個嵌套UL的UL， - 用下拉子菜單例如甲菜單：

<div id="menu"> 
    <ul> 
    <li>Menu item</li> 
    <li>Menu item 
     <ul> 
     <li>Sub Menu item</li> 
     <li>Sub Menu item</li> 
     </li> 
     </ul> 
    <li>Menu item 
     <ul> 
     <li>Sub Menu item</li> 
     <li>Sub Menu item</li> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

顯示第一個UL內聯，而第二個ul顯示爲block，並隱藏並使用JQuery顯示。

我有以下CSS定位UL下的respecitve李父在子菜單：

#menu UL LI { 
    list-style-type: none; 
    display: inline; 
    padding: 10px; 
    position: relative; 
} 


#menu UL LI UL { 
    display: none; 
    z-index: 999; 
    position: absolute; 
} 

#menu UL LI UL LI { 
    display: block; 
    width: 100px; 
} 

我的問題是，子菜單項不會在Firefox和IE各自的父母下出現。但它在Chrome和Safari中運行良好。

我認爲這是做這件事的正確方法，但有誰知道更好的方法？

Answer 1

爲了得到你想要的狀態，需要一些小的改動：

#menu ul li { 
+ display: inline-block; 
- padding: 10px; 
+ padding: 0 10px 0 10px; 
} 

#menu ul li ul li { 
+ padding: 10px; 
} 

Answer 2

無需重新發明輪子，更靈活： http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

演示： http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html

另外，如果您不打算使用靈活佈局，請設置修正寬度。當瀏覽器縮小時，您的網站就會中斷。

Answer 3

最簡單的方法是讓它坐在正確的位置上，將它放在父母的LI上。

將left: 0添加到您的#menu UL LI UL css聲明中，它應該開始按照您的要求行事。

Answer 4

如果你已經從你的網站複製你的標記，那麼這可能是錯誤的。你的開始和結束標籤不匹配。我已經修復了這裏：

<div id="menu"> 
<ul> 
    <li>Menu item</li> 
    <li>Menu item 
     <ul> 
     <li>Sub Menu item</li> 
     <li>Sub Menu item</li> 
     </ul> 
    </li> 
    <li>Menu item 
     <ul> 
     <li>Sub Menu item</li> 
     <li>Sub Menu item</li> 
     </ul> 
    </li>  
</ul> 
</div> 

我剛剛對你的CSS做了一些快速修改，可以幫助你。

#menu ul 
{ 
    background: blue; 
} 

#menu ul li 
{ 
    list-style-type: none; 
    width: 100px; 
} 

#menu ul > li 
{ 
    display: inline-block; 
    position: relative; 
    padding: 10px; 
    height: 20px; 
    background: red; 
} 

#menu li > ul 
{ 
    display: none; 
    position: absolute; left: 0px; top: 40px; z-index: 999;  
    background: yellow; 
} 

#menu li > ul > li 
{ 
    display: block; 
    background: green; 
}