mseifert mseifert - 4 months ago 20
CSS Question

CSS Transition Visibility Not Working for drop down menu

I'm trying to get the menu to delay closing when leaving hover (a forgiveness factor for a 3 level menu). I've put in a

transition-property: visibility;
and
transition-duration: 2s;
but it isn't doing anything. What am I missing?

If there is a better way to accomplish the forgiveness factor, I'm certainly open to that as well.

A fiddle is here

*UPDATE I've simplified the example to a 2 layer menu.
There is an example post here but I'm not sure what the difference is that makes this one work.

The 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>


The css

.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

The transition effect will only affect the visibility property if that is the property that changes between the regular and hover state. Right now you are trying to animate visibility but you are showing/hiding the element with display: none. Instead of using display, change the visibility value.

This should work:

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

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