父菜单下的位置子菜单在 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 显示块并使用 JQuery 隐藏和显示。

我有以下 CSS 将子菜单 ul 放置在其各自的父菜单 li 下：

#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;
}