二级 UL 宽度问题 - 仅限 css答案

【问题标题】：Second level UL width issue - css only二级 UL 宽度问题 - 仅限 css
【发布时间】：2012-03-22 23:53:10
【问题描述】：

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

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

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

【问题讨论】：

width: 100% 事情只能发生在树中宽度已知的最新元素上。如果您没有明确指定宽度，它只会沿着树向上直到找到某些东西。要轻松获得这种居中的行为，我不知道一个简单的方法，但我可以想到一些看起来有点难看的复杂方法。

【解决方案1】：

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

ul li {
    width: 50px;
}

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

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

【讨论】：