Html 水平菜单-li的全宽'；s儿童保险公司'；s

我有一个带有表格/表格单元格标签的水平菜单：

菜单{
显示：表格；
宽度：100%；
}
李先生{
显示：表格单元格；
}

所选菜单项

这是很好的工作，但我也有类似的子菜单

所选菜单项

现在，通常我只需要制作第一级li的

位置：relative

和第二级ul

位置：absolute

，并赋予它与我给li元素相同的大小；但在这种情况下，我对李氏家族没有固定的看法，因此我尝试了以下方法：

.menu li{
位置：相对位置；
}
ul子菜单{
位置：绝对位置；
宽度：100%；
}

但它并不像我预期的那样扩展到其父元素（li）的100%宽度，而是获得最近指定元素的宽度（在本例中，我认为是宽度为960px的div，但它也可能更大）

---

我的问题是：是否可以将第二级ul元素扩展到其父元素li的宽度，而不返回JavaScript

我知道，我必须为禁用的浏览器编写一个脚本，比如IEFirefox不允许您这样做。在

td

中使用另一个元素，并使其相对定位：

<ul class="menu">
  <li><span>Selected Menu Item</span></li>
  <li><a href="#item">Another Item with Sub</a>
    <div>
      <ul class="submenu">
        <li><a href="#sub">Submenu Item</a></li>
        <li><a href="#sub">Submenu Item</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#item">Another Item</a></li>
  <li><a href="#item">Another Item</a></li>
</ul>

---

这将在所有浏览器中都能更好地工作。

使用您的代码，我确实理解ul为什么会扩展，因为它的位置与主体绝对相对，其宽度为100%与主体的宽度相匹配。我觉得这比chrome的行为更符合逻辑。现在，将位置更改为相对使容器ul实现其容纳另一个ul，以便其li元素扩展以覆盖它，请看一看，但仅将其他li的高度设置为0无法解决此问题。因为他们继承了ul的高度。所以，我能得到的最接近的是这个解决方案。也许，它有一些用处。

这个问题只适用于Firefox。Chrome以你（可能）想要的方式显示它。遗憾的是，你不得不为firefox使用额外的标记；但是谢谢你的解决方案！你是对的，但这是使用类似于

表格单元格

的黑客的自然结果。像往常一样浮动的

li

永远不会有这样的行为。：-）但是我当然明白你的观点，你不能使用浮动来动态地填充

ul

的整个宽度。我很乐意帮忙！

.menu li {
  display: table-cell;
}
.menu li div {
  position: relative;
  background: #444;
}