css - 从间接祖先继承宽度

Question

我有以下 HTML

<ul id="nav">
  <li>
    <a href="#">Menu Item 1</a>
    <ul class="sub_menu">
      <!-- full of <li> sub menu items -->
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
    <ul class="sub_menu">
      <!-- full of <li> sub menu items -->
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 3</a>
  </li>
</ul>

#nav 是浏览器窗口宽度的 100%。

我想仅使用 CSS 在具有类似 CSS 的容器内并排 float Menu Item:

{ width: 1000px;  margin: 0 auto; }

但我希望 .sub_menu 的宽度与 #nav 的宽度相同。

如何在不更改 HTML 的情况下完成此操作？

Answer 1

你可以position: relative #nav，用li做你的事，然后position: absolute;左:0；右:0 .sub_menu。

这样 .sub_menu 与 #nav 的宽度相同，而不管 li 的宽度如何。您必须添加和调整更多样式以使其看起来漂亮且位置合适，但我会把它留给您。

另一个要求是 li 将保持 position: static 因为 .sub_menu 的位置必须相对于 #nav 。

编辑:@simon 的回答几乎是我的一个实现，但 OP 在那里留下了一条评论，表明它是不够的。我们仍然不确定问题出在哪里。