Раскрывающийся список второго уровня не отображается с помощью переходов - PullRequest
Новая
       5

Раскрывающийся список второго уровня не отображается с помощью переходов

0 голосов
/ 06 октября 2018

Я строю многоуровневую навигацию.Без переходов работает:

Демо без перехода

При использовании переходов второй уровень не отображается.

Демонстрация с переходом

Они отличаются в двух точках:

С переходами: 

nav ul ul {
  position: absolute;
  top: 100%;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.8s linear;
}

nav ul li:hover>ul {
  max-height: 750px;
}

Без переходов: 

nav ul ul {
  position: absolute;
  top: 100%;
  display: none;
}

nav ul li:hover>ul {
  display: inherit;
}

Что мне нужно изменить, чтобы появился второй Ярус?

1 Ответ

0 голосов
/ 06 октября 2018

Проблема в том, что nav ul ul {overflow: hidden;}.

Я предлагаю анимировать opacity, чем max-height: 

nav ul ul {
  position: absolute;
  top: 100%;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

nav ul li:hover>ul {
  opacity: 1;
  pointer-events: auto;
}

jsFiddle

...