jquery - 父菜单下的位置子菜单在 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 定位在它们各自的父级 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;
 }