宽度 = 父宽度 CSS3答案

【问题标题】：Width = Parent Width CSS3宽度 = 父宽度 CSS3
【发布时间】：2012-01-10 15:10:09
【问题描述】：

我已经阅读了一些关于 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 之类的？

【问题讨论】：

我认为您所要求的内容中没有 CSS3。

标签： css navigation drop-down-menu

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

您可能需要使用 position:relative 来增强子列表 ul 的位置，具体取决于您现有的样式。戴夫

【讨论】：