css - 宽度 = 父级宽度 CSS3

Question

我读过一些关于 CSS3 计算的内容，但我很难找到它。我正在构建一个带有下拉菜单的网站，我希望下拉菜单与父项的宽度相匹配，父项的宽度是可变的。我总是可以为每个下拉菜单设置一个特殊的 ID 或类，但这有点麻烦。

HTML 的结构如下:

<ul>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
    <li><a href="#">Normal Item</a></li>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
</ul>

有没有办法使用 CSS3 将其设置为 width = parent width 之类的？

Answer 1

将父元素包裹在一个 div 中，并将 ul 嵌套在该 div 中，宽度设置为 100%(如果您希望填充，则设置为更小)和 position:relative。

所以...

<li>
    <div id='parent'><a href....></a>
        <ul class='sublist' style='width:100%;'>
            <li>...</li>
        </ul>
    </div>
</li>

根据您现有的样式，您可能需要为子列表 ul 的 position:relative 增强它。 戴夫