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

Question

我已经通过如下列表构建了一个菜单:

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

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

有什么办法可以避免这种情况吗？

Answer 1

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

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