Width = Parent Width 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将其设置为宽度=父宽度或什么什么办法？

Answer 1

将父物品包装在一个div中，并将ul的宽度设置为100％（如果您希望填充时宽度较小）和position：relative，则将该ul嵌套在该div内。

所以......

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

您可能需要加强与地位：相对的取决于子列表UL对现有的样式。 Dave