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

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