1

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

.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>

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

.menu li {
  position: relative;
}

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

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

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

我知道这样一个事实，即我必须为禁用的浏览器编写脚本，例如 IE<=7。这是一个运行示例：http: //jsfiddle.net/hy73d/

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

4

2 回答 2

3

Firefox 不会让你给 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;
}

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

于 2012-07-06T09:20:48.967 回答
0

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

于 2012-07-06T09:52:49.420 回答