第二级UL宽度问题-仅CSS

Question

我在尝试使第二级UL具有基于父级LI的100％宽度而不是像现在这样的第一级UL时遇到问题。 我也尝试仅在可能的情况下使用CSS。 我试图弄清楚这一点的原因是，这样我就可以将下拉列表置于父对象的下方。

最好的理解是，当您将鼠标悬停在MEN上时，我试图模仿此导航下拉列表： 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是指定宽度的第一个祖先。