如何让我的父列表元素忽略其子宽度？

Question

我已经通过下面的列表构建了一个菜单：

<ul>
   <li></li>
   <li></li>
   <li>
      <ul>
          <li></li>
      </ul>
   </li>
   <li></li>
   <li></li>
</ul>

列表中的子菜单项仅在您悬停其父列表元素时显示。但是，子列表元素宽度将强制父元素具有相同的宽度，并且当您将鼠标悬停在菜单上时，它将使菜单更改大小。

有什么办法可以阻止这个吗？

Answer 1

将CSS类添加到元素中。 （一个用于外部<ul>，每个初始<li>元素都相同，然后重复到内部列表。）

使用CSS选择器定义<ul>的静态宽度，并可能在word-wrap元素中添加<li>。

Answer 2

在包含元素上设置固定宽度（因此顶级ul）。子元素将包裹在宽度内（边缘情况除外，例如其中一个子菜单项的白色空间：nowrap）。

Answer 3

定义父级的宽度并相对于所有子元素设置位置 也尝试父母的绝对位置