3

我想使用格式化为表格的列表元素进行导航，因此所有元素的宽度都是相同的，但它不适用于 Firefox。

HTML：

<div id="#navigation">
   <ul>
      <li>
         <a>Menu1</a>
         <ul>
            <li><a>Sub1</a></li>
            <li><a>Sub2</a></li>
         </ul>
      </li>
      <li><a>Menu2</a></li>
   </ul>
</div>

CSS（缺少一些属性，但只有颜色之类的东西......）：

#navigation {
   position: relative;
   height: 25px;
   width: 852px;
}

#navigation>ul {
   width: 850px;
   top: 0px;
   padding: 0;
   margin: 1px;
   list-style-type: none;
   display: table;
   table-layout: fixed;
   border-collapse: collapse;
}

#navigation>ul>li {
   position: relative;
   height: 25px;
   display: table-cell;
}

#navigation>ul>li>ul {
   position: absolute;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#navigation>ul>li>ul>li {
   /* nothing really happening here */
}

JS 小提琴：http: //jsfiddle.net/ZrsXv/2/

在 Chrome、Safari、IE8 和更高版本中一切正常，在 IE6 和 IE7 中也进行了一些修改

铬菜单

但是在 Firefox 中我总是会得到这个

FF 菜单 1

我知道我不是第一个遇到问题的人，但我也尝试过在 stackoverflow 上找到的解决方案，但如果有什么变化，这就是我得到的一切

FF 菜单 2

那么有没有一个不会把一切都搞砸的解决方案？

4

3 回答 3

3

我认为你的问题是那个位置：相对；不适用于表格单元格。我目前找不到来源，但我很确定我以前遇到过同样的问题。

所以在 Firefox 中发生的事情是 #navigation>ul>li>ul 的宽度被计算为 #navigation 的 100%，它是具有除静态（默认位置值）以外的位置值的最近祖先。

你可以通过插入一个带有 position: relative; 的虚拟元素来解决这个问题。(f.ex. a div) inside #navigation>ul>li 然后 #navigation>ul>li>ul 必须更改为 #navigation>ul>li>div>ul

于 2012-06-14T21:08:11.157 回答
0

最简单的解决方案是参考从嵌套列表构建的现有菜单示例。

http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/

我也不确定您为什么要使用display: table; 自从我上次自己制作多级菜单已经有一段时间了，但我从未使用过那种显示方法，而且我在简短搜索后找到的示例也没有。

于 2012-06-14T19:58:57.040 回答
0

阅读其他答案和评论，我了解您使用的原因display: table，并且可以接受...

我尝试了不同的解决方案，但对 Firefox 没有任何作用，所以，如果您有兴趣使用这种方法，我可以建议使用 javascript / jQueryli为孩子们提供第一个元素宽度，ul就像我在您的jsfiddle中所做的那样

否则我不能以不同的方式帮助你......对不起。

于 2012-06-15T09:46:30.643 回答