Jquery 在IE/FF中不工作的父菜单下定位子菜单

我有两层菜单-一个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>

我的问题是，在FireFox和IE中，子菜单项不会出现在它们各自的父菜单项下。但是，在Chrome和Safari中，子菜单项可以很好地工作

---

我认为这是正确的方法，但有人知道更好的方法吗？

要达到您想要的状态，需要进行一些小的更改：

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

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

---

无需重新发明车轮，更灵活：

演示：

---

此外，如果您不打算使用灵活的布局，请设置固定宽度。当浏览器缩小时，您的站点会中断。

使其位于正确位置的最简单方法是将其定位到父LI

---

将

left:0

添加到您的

#菜单UL LI UL

css声明中，它应该开始按您所希望的方式运行。

如果您从站点复制了标记，则可能是这一错误。您的开始和结束标记不匹配。我已经在这里解决了这个问题：

<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>

<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>

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