Basically it won't let me use the transition: opacity in CSS, when you move the mouse to the target, the idea is that you have opacity 0, and when you hover over the object, there is a transition so that opacity goes to 1, the problem is which goes to 1, but without the transition.
.nav li ul
{
list-style-type: none;
display:none;
position:absolute;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 1s 0s ease;
-moz-transition: opacity 1s 0s ease;
transition: opacity 1s 0s ease;
}
.nav li:hover > ul
{
display: block;
opacity: 1;
}
The problem is not with
opacity
, but withdisplay
. It happens that the propertydisplay
is not animatable .On MDN (in the English version), you can check this by going to the page related to the property, in the Formal definition > Animation type section . In the case of
display
, you'll see that it says Not animatable .