如何使我的父級列表元素忽略其子級的寬度？

Question

我有一個菜單列表，如下所示：

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

僅當將鼠標懸停在其父列表元素上時，才會顯示列表中的子菜單項。 但是，子級列表元素的寬度將強制父級元素具有相同的寬度，並且當您將菜單懸停時，它將使菜單更改大小。

有什么辦法可以防止這種情況？

Answer 1

將CSS類添加到您的元素。 （一個用於外部<ul> ，對於每個初始<li>元素相同，然后重復到內部列表。）

使用CSS選擇器定義<ul>的靜態寬度，並可能在<li>元素中添加word-wrap 。

Answer 2

在包含元素上設置一個固定寬度（因此頂層ul）。 子元素將包裹在寬度內（邊緣情況除外，例如，空白：子菜單項之一上的nowrap）。

Answer 3

使父級定義寬度並相對於所有子元素設置位置，還嘗試對父級進行絕對定位