0

我有两层菜单 - 一个带有另一个嵌套 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 中运行良好。

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

4

4 回答 4

1

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

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

 #menu ul li ul li {
+  padding: 10px;
 }
于 2013-02-21T00:39:50.210 回答
0

无需重新发明轮子，更灵活： http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-菜单/

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

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

于 2013-02-21T00:43:52.313 回答
0

让它坐在正确位置的最简单方法是将其定位到父 LI。

添加left: 0到您的#menu UL LI ULcss 声明中，它应该开始按照您的意愿行事。

于 2013-02-21T00:45:06.940 回答
0

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

<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;
}
于 2013-02-21T01:21:41.437 回答