Навигация по списку детей, заставляя родительский список при наведении

Question

У меня есть выпадающий список под родителем <li>. При наведении курсора на родителя <li> дети выглядят так, как ожидалось, но родитель <ul> также падает, что не является ожидаемым поведением. Я не могу понять, почему. Вот кодекс , демонстрирующий проблему.

Answer 1

Когда вы опускаете внутренний список, он растягивает внешний элемент списка, что, в свою очередь, делает все меню верхнего уровня такой же высотой. Ваши элементы списка верхнего уровня затем опускаются в конец этого элемента. Вы можете держать их всех наверху с помощью этого:

ul.navigation li {
    ...
    vertical-align: top;
}

Стоит отметить, что все это поведение может быть достигнуто только с помощью CSS. Вот начало:

ul.navigation li ul {
  max-height: 0; 
  opacity: 0;
  transition: all .5s;
}
ul.navigation li:hover ul {
  max-height: 200px;
  opacity: 1; 
}

Демо

Answer 2

Попробуйте добавить: vertical-align: top; o css из

элементов, которые выпадают вниз.