位置子菜单不工作在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; 
}