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

【问题标题】：Horizontal Menu - full width of li's child ul's水平菜单 - li 的孩子 ul 的全宽
【发布时间】：2012-07-06 17:14:50
【问题描述】：

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

.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 元素相同的大小；但在这种情况下，我没有固定的 li，所以我尝试了这个：

.menu li {
  position: relative;
}

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

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

我的问题是：是否可以将二级 ul 元素扩展到其父元素的宽度，即表格单元格样式的 li 而无需回退到 JavaScript？

我知道，我必须为禁用的浏览器编写脚本，例如 IEhttp://jsfiddle.net/hy73d/

编辑#1：引起了我的注意，这实际上在 webkit-browser 和 opera 中有效；所以真正的问题是，壁虎有解决方案吗？

【问题讨论】：

这个问题只适用于火狐。 Chrome 会按照您（可能）希望的方式显示它。

标签： html css drop-down-menu menu submenu

【解决方案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;
}

这将在所有浏览器中运行得更好。

【讨论】：

很遗憾，您必须为 firefox 使用额外的标记；但感谢您的解决方案！
你是对的，但这是使用像 table-cell 这样的黑客的自然结果。像往常一样浮动的li 永远不会表现得像这样。 :-) 但是我当然明白你的观点，你不能使用浮点数来动态填充ul 的整个宽度。我很乐意提供帮助！

【解决方案2】：

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

【讨论】：