CSS Transition Visibility Не работает для выпадающего меню

Question

Я пытаюсь заставить меню задерживать закрытие при выходе из режима зависания (коэффициент прощения для меню 3 уровня). Я положил transition-property: visibility; и transition-duration: 2s;, но это ничего не делает. Что мне не хватает?

Если есть лучший способ добиться коэффициента прощения, я, конечно, тоже открыт для этого.

A fiddle is here

* UPDATE я упростил пример меню в 2 слоя. Существует example post here, но я не уверен, какая разница, что заставляет это работать.

HTML-

<ul class="nav"> 
    <li class="top"><a class="top_link">Grades</a> 
    <ul class="sub"> 
     <li><a class="fly">Grade 1</a></li> 
    </ul> 
    </li> 
</ul> 

СМЧ

.nav { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    height: 36px; 
    position: relative; 
} 

.nav ul { 
    -moz-transition-property: visibility; 
    -moz-transition-duration: 2s; 
    -webkit-transition-property: visibility; 
    -webkit-transition-duration: 2s; 
    transition-property: visibility; 
    transition-duration: 2s; 
} 

.nav li.top { 
    display: block; 
    float: left; 
} 

.nav li a.top_link { 
    display: block; 
    float: left; 
    height: 36px; 
    line-height: 27px; 
    padding: 0 0 0 12px; 
} 

.nav li:hover { 
    position: relative; 
} 

.nav ul { 
    position: absolute; 
    margin: 0; 
    list-style: none; 
    display: none; 
} 

.nav li:hover > ul { 
    display: block; 
} 

.nav li:hover ul.sub { 
    left: 0; 
    top: 100%; 
    background: #fff; 
    border: 1px solid #3a93d2; 
    white-space: nowrap; 
    width: auto; 
    height: auto; 
} 

Answer 1

Эффект перехода будет влиять только на visibility свойства, если это свойство, которое изменяется между регулярным и парить состоянии. Прямо сейчас вы пытаетесь анимировать visibility, но вы показываете/скрываете элемент с display: none. Вместо использования display измените значение visibility.

Это должно работать:

.nav ul { 
    position: absolute; 
    margin: 0; 
    list-style: none; 
    visibility: hidden; 
} 

.nav li:hover > ul { 
    visibility: visible; 
} 

Answer 2

В случае, если кто хочет видеть рабочий раствор с нежным замирания в подменю, он находится ниже. Он требует настройки, чтобы заставить его исчезать только при выходе из режима наведения, но сразу же отображается при наведении.

In a fiddle

HTML-

<ul class="nav"> 
    <li class="top"><a class="top_link">Grades</a> 
    <ul class="sub"> 
     <li><a class="fly">Grade 1</a></li> 
    </ul> 
    </li> 
</ul> 

устанавливаемыми сотовыми

.nav { 
    list-style: none; 
    position: relative; 
} 

.nav ul { 
    visibility: hidden; 
    opacity: 0; 
    transition-property: visibility, opacity; 
    -moz-transition-property: visibility, opacity; 
    -webkit-transition-property: visibility, opacity; 

    transition-timing-function: linear; 
    -moz-transition-function: linear; 
    -webkit-transition-function: linear; 

    transition-duration: 0s, 0.5s; 
    -moz-transition-duration: 0s, 0.5s; 
    -webkit-transition-duration: 0s, 0.5s; 

    transition-delay: 0.5s, 0s; 
    -moz-transition-delay: 0.5s, 0s; 
    -webkit-transition-delay: 0.5s, 0s; 
} 

.nav li { 
    position: relative; 
} 

.nav li.top { 
    float: left; 
} 

.nav li a.top_link { 
    float: left; 
    height: 36px; 
} 

.nav ul { 
    position: absolute; 
    visibility: hidden; 
} 

.nav li:hover > ul { 
    visibility: visible; 
    opacity: 1; 
    transition-duration: 0s; 
    -moz-transition-duration: 0s; 
    -webkit-transition-duration: 0s; 

    transition-delay: 0s; 
    -moz-transition-delay: 0s; 
    -webkit-transition-delay: 0s; 
} 

.nav li ul.sub { 
    background: #fff; 
    white-space: nowrap; 
    left: 0; 
    top: 100%; 
}