二级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是第一个指定宽度的祖先。