Почему мой
    разверните, чтобы обернуть
  • элементы, которые он содержит?

Я использую WordPress. У меня есть меню, которое построено со списком.

В основном, его образец выглядит следующим образом:

<ul>
 <li>FrontPage</li>
 <li>MenuItem</li>
 <li>ParentMenuItem
 <ul> <--- This wont adjust its height to fit its children
 <li>MenuItemChild</li>
 <li>MenuItemChild</li>
 </ul>
 </li>
 <li>MenuItem</li>
</ul>

Теперь ParentMenuItem не будет расширять и охватывать всех своих детей своим фоном и границей. Я не могу понять, почему. Единственный способ, которым я смог сделать это, - дать ему фиксированную высоту.

3 ответа

Измените height своей ul от 100% до auto:

height: auto;

Причина, по которой ваша высота ul слишком мала, заключается в том, что вы используете 100%, что означает, что она займет высоту своего родителя. Это не означает, что нужно взять максимальное доступное пространство и не значит взять на себя сумму высоты всех своих детей. Поскольку родитель имеет height: 33px, ваша ul также имеет эту высоту.


В этом правиле

.menu-primary-container ul li ul {
 height: 100%;
 /* ... */
}

вы должны удалить height.

И вы должны переименовать селектор

.menu-primary-container ul

в

.menu-primary-container > ul

чтобы повлиять только на первую ul, а не на всех потомков.


Это потому, что ваш

  • плавает влево, что означает, что они не дают никакой формы содержащему элемент.

    Если вы установили вложенный

  • float: none; clear: both; float: none; clear: both; это должно решить проблему.
  • licensed under cc by-sa 3.0 with attribution.