Edit: Ok, you contributed your website, so here's the solution, actually the transition
does work, but z-index
is causing you an issue there, so it flicks the sub menu instantly.. though it transits, use z-index: 100;
for .nav ul li:hover > ul
on line 153 in style.css and make sure you remove visibility
properties as they are not required.
First of all, your markup is invalid, you cannot nest ul
as a direct descendant to ul
so nest that in an li
and secondly, you cannot transit visibility
property, so only use opacity
and get rid of the visibility
property as well. If you want, you can also use animation-timing-function
property with a value of linear
for a consistent fadein and fadeout effect.
.nav ul ul{
position:absolute;
opacity:0;
width:170px;
margin:0;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
transition:opacity 0.3s linear;
}
.nav ul li:hover > ul{
opacity:1;
}
And make sure you declare properietary properties before general properties.