Adding transitions to menu to delay hover

[Biology Forums]

I would like to add this to my dropdown <ul> as we hover over the primary <li> so that it doesn't appear right away, though I can't get it to work. Here is my CSS for the menu.

Code Select Expand

.menu
{
border: none;
padding: 0px;
height: 33px;
background: url(http://biology-forums.com/Themes/default/images/catbg.jpg) #88A6C0 repeat-x;
position: relative;
margin-left: 12.9%;
}

.menu ul
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}

.menu ul li
{
display: inline;
float: left;
margin: 0;
padding: 0;
}

.menu ul li a
{
background: url(http://biology-forums.com/Themes/default/images/catbg.jpg) #88A6C0 repeat-x;
color: white;
display: block;
font-size: 11px;
font-weight: bold;
line-height: 33px;
margin: 0px;
padding: 0 13px 0 13px;
text-align: center;
text-decoration: none;
}

.menu ul li a:hover, .menu ul li:hover a
{
background: url(http://biology-forums.com/Themes/default/images/titlebg.jpg) #88A6C0 repeat-x;
color: #33587A;
font-weight: bold;
text-decoration: none;
}

.menu ul li.current a
{
background: url(http://biology-forums.com/Themes/default/images/titlebg.jpg) #88A6C0 repeat-x;
color: #33587A;
font-weight: bold;
text-decoration: none;
}

.menu ul li ul
{
background: #B2C4CD;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px;
z-index: 2;
}

.menu ul li:hover ul
{
display: block;
}

.menu ul li ul li
{
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
}

.menu ul li:hover ul li a
{
background: none;
}

.menu ul li ul li a
{
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
text-decoration: none;
}

.menu ul li ul li a:hover, .menu ul li ul li:hover a
{
background: #33587A url(right_menu_arrow.png) center left no-repeat;
border: 0px;
color: #FFFFFF;
text-decoration: none;
}

.menu p
{
clear: left;
}

.menu ul li ul li
{
position: relative;
}

.menu ul li ul li ul, .menu li:hover ul li ul
{
display: none;
}

.menu li ul li:hover ul
{
display: block;
position: absolute;
left: 100%;
top: 0;
}

.menu li ul li:hover ul li a { background: none; color: #6d6d6d; }
.menu li ul li:hover ul li a:hover { background: #33587A url(right_menu_arrow.png) center left no-repeat; color: #fff; }

Where should I put the transition?

Code Select Expand

-webkit-transition: 0s ease-in-out 1s;
    -moz-transition: 0s ease-in-out 1s;
    -o-transition: 0s ease-in-out 1s;
    transition: 0s ease-in-out 1s;

[Gwenwyfar]

I believe it would be everywhere where there is a :hover set for it.

1s is quite long though, you should use something more like half a second at most.

[Biology Forums]

I believe it would be everywhere where there is a :hover set for it.

1s is quite long though, you should use something more like half a second at most.

That didn't do it either

[Gwenwyfar]

I think you're actually using the wrong code. Try changing it to transition: color 1s ease-in-out.

(And sorry, I thought you were using a hover-sub menu, for just appearance changes I guess time doesn't matter a lot)

[Daniiel]

The code of the transition is wrong, use this:

Code Select Expand

-webkit-transition: 0.3s ease-in-out all;
    -moz-transition: 0.3s ease-in-out all;
    -o-transition: 0.3s ease-in-out all;
    transition: 0.3s ease-in-out all;

And you have to put it in .menu ul li a

Greetings!

[Biology Forums]

Thanks, Daniiel, but that didn't do it either. It must be some way I've set up my menu that's messing with it.

[Gwenwyfar]

I tested it on my menu, on some links, and it worked fine for color transition. It was on :hover that I applied it though.