How can I make my parent list element ignore its children's width?

Question

I've got a menu build by a list like below:

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

The sub menu items in the list are only displayed when you hover their parent list element. However the child list elements width will force the parent element to the same width and it will make the menu change size when you hover menus.

Is there any way I can prevent this?

Answer 1

Add CSS classes to your elements. (One for the outer <ul> , the same for each of the initial <li> elements, then repeat to the inner lists.)

Use CSS selectors to define a static width of the <ul> s, and probably add a word-wrap in the <li> elements.

Answer 2

Set a fixed width on the containing element (so the top level ul). Child elements will wrap inside the width (other than edge cases, eg a white-space: nowrap on one of the sub menu items).

Answer 3

使父级定义宽度并相对于所有子元素设置位置，还尝试对父级进行绝对定位