Question

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

.menu {
  display: table;
  width: 100%;
}

.menu li {
  display: table-cell;
}

<!doctype html>
<html>
  <body>
    <div style="width: 960px">
      <ul class="menu">
       <li><span>Selected Menu Item</span></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
       <li><a href="#item">Another Item</a></li>
      </ul>
    </div>
  </body>
</html>

这很好用，但我也有

这样的子菜单

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

现在通常我只会制作第一级li position: relative和第二级ul position: absolute并给它与我给li元素相同的大小;但在这种情况下，我没有为李的固定，所以我尝试了这个：

.menu li {
  position: relative;
}

ul.submenu {
  position: absolute;
  width: 100%;
}

但它不是 - 正如我所料 - 扩展到其父（li）的100％宽度，而是获得最近指定元素的宽度（在这种情况下，我认为宽度为960px的div，但它可能也更大）。

我的问题是：是否可以将第二级ul-element扩展为其父级的宽度，表格单元格样式为li而不回退到JavaScript？

我知道我必须为禁用的浏览器编写脚本，例如IE＆lt; = 7。这是一个运行的例子： http://jsfiddle.net/hy73d/

<小时/> 编辑＃1：引起我的注意，这实际上适用于webkit浏览器和歌剧;所以真正的问题是，gecko有解决方案吗？

Answer 1

Firefox不会让你give a relative position to table-cells。使用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>

当然只将CSS规则应用于您的新div：

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

这在所有浏览器中都会有效。

Answer 2

使用你的代码我确实理解为什么ul正在扩展，因为它被定位在身体的绝对位置，其宽度为100％与身体的宽度相匹配。我宁愿发现它比chrome的行为更合乎逻辑。现在，将位置更改为relative使容器ul实现其持有另一个ul，使其li元素展开以覆盖它，看看http://jsbin.com/iwesoc/2/edit#preview但是仅仅通过将其他li的高度设置为0来解决问题因为他们继承了ul的高度。所以，我能得到的最接近的是这个解决方案http://jsbin.com/iwesoc/2/edit#preview。也许，它有一些用处。

水平菜单 - li的孩子ul的全宽

2 个答案: