第二级UL宽度问题-仅css

Question

我在尝试使第二级UL具有基于父LI的100%宽度而不是像现在这样的第一级UL时遇到了问题。如果可能的话，我也在尝试只使用css。我试图弄清楚这一点的原因是，这样我就可以将下拉菜单放在父级的中间。

为了更好地理解，我试图模仿当你将鼠标悬停在男性上方时的导航下拉菜单：http://us.gant.com/

<ul> <----first level
  <li>
    <ul> <----second level
    <li></li>
    </ul>
  </li>
</ul>

Answer 1

您必须为此指定父li的宽度。所以要这样做：

ul li {
    width: 50px;
}

ul li li {
    width: auto; /* reset width */
}

现在，子菜单的ul具有与li相同的宽度，因为li是指定了宽度的第一个祖先。