Firefox - 宽度：100％不适用于列表中的列表（显示：表;）

Question

我想使用格式化为表格的列表元素进行导航，因此所有元素的宽度都相同，但它不适用于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中，我总会得到这个

我知道我不是第一个遇到问题的人，但我也尝试过在stackoverflow上找到的解决方案，但如果某些事情正在发生变化，这就是我得到的一切

那么有没有一个解决方案不会弄乱一切？

Answer 1

我认为你的问题是这个位置：相对;并不真正适用于表格单元格。我目前找不到消息来源，但我很确定我之前遇到过同样的问题。

所以在Firefox中发生的事情是＃navigation＆gt; ul＆gt; li＆gt; ul的宽度计算为#navigation的100％，这是最接近祖先的位置值而不是静态（默认位置值）。

你可以通过插入一个位置为relative的虚拟元素来解决这个问题。 （f.ex.al div）在＃navigation＆gt; ul＆gt; li中，然后＃navigation＆gt; ul＆gt; li＆gt; ul必须更改为＃navigation＆gt; ul＆gt; li＆gt; div＆gt; ul

Answer 2

最简单的解决方案是引用已经存在的嵌套列表构建的菜单示例。

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

我不确定你为什么要使用display: table;自从我上次自己创建了一个多级菜单以来已经有一段时间了，但我从未使用过这种显示方法，而且我在简短搜索后找到的所有例子都没有。

Answer 3

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

我尝试了不同的解决方案，对Firefox没有任何作用，所以，如果你对使用这种方法感兴趣，我可以建议使用javascript / jQuery为我的孩子li提供第一个ul元素宽度在你的 jsfiddle here

中做了

否则我不能以不同的方式帮助你...抱歉。