Unidades em "0s" Transição no Firefox
Por que a transição a seguir não funciona no Firefox sem as unidades? Depois de adicionar as unidades, isso funciona. Parece que os outros principais navegadores são indiferentes às unidades.
Tanto quanto eu sei, este é o único exemplo de um tempo de transição de '0', sem unidades, não funcionando no Firefox.
Você pode ver funcionando, e com as unidades,aqui no JSFiddle.
E aqui está o mesmo código exato sem as unidades, e quebrado,no JSFiddle.
Como você pode ver, o Firefox é o único navegador que parece quebrar. Além disso, aqui está o código:
HTML:
<nav>
<ul id="nav">
<li>
<a href="#" id="nav1">Home</a>
</li>
<li>
<a href="pasta.html" id="nav2">Charters</a>
<ul>
<li><a href="#">New Groups</a></li>
<li><a href="#">Current Groups</a></li>
</ul>
</li>
<li>
<a href="same.php" id="nav3">Funding</a>
<ul>
<li><a href="#">Funding Guide</a></li>
<li><a href="#">Get Funding</a></li>
<li><a href="#">Treasurers</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li>
<a href="#" id="nav4">Accounts</a>
</li>
<li>
<a href="magis2.swf" id="nav5">Services</a>
<ul>
<li><a href="#">Shuttle Service</a></li>
<li><a href="#">Van Reservations</a></li>
<li><a href="#">Rattech</a></li>
<li><a href="#">Sound System</a></li>
</ul>
</li>
</ul>
</nav>
CSS:
/****************************
Functionality
*****************************/
/* Menu header */
#nav > li {
float: left;
margin: 0 19px;
padding: 0 1px 19px 0;
position: relative;
}
/* Dropdown elements */
#nav > li:hover ul {
opacity: 1;
visibility: visible;
-webkit-transition-delay: 0, 0;
/*Remove the units here and in the next selector to break it*/
-moz-transition-delay: 0s, 0s;
-o-transition-delay: 0, 0;
transition-delay: 0, 0;
}
#nav ul {
visibility: hidden;
z-index: 1000;
width: 140px;
padding: 8px 0;
position: absolute;
top: 35px;
left: -35px;
opacity: 0;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-transition-property: opacity, visibility;
-moz-transition-property: opacity, visibility;
-o-transition-property: opacity, visibility;
transition-property: opacity, visibility;
-webkit-transition-duration: .2s, 0;
/*Remove the units here and below to break it*/
-moz-transition-duration: .2s, 0s;
-o-transition-duration: .2s, 0;
transition-duration: .2s, 0;
-webkit-transition-delay: 0, .2s;
/*Remove the units here and below to break it*/
-moz-transition-delay: 0s, .2s;
-o-transition-delay: 0, .2s;
transition-delay: 0, .2s;
}
/*********
Style (this should be irrelevant)
*********/
a {
color: #000;
display: block;
font-size: 13px;
text-decoration: none;
font-family: 'Georgia', serif;
}
#nav ul a {
font-size: 12px;
padding: 10px 18px;
}
#nav ul li:hover {
background: #e9e9e9;
}
nav {
width: 470px;
height: 45px;
margin-top: 40px;
margin-left: 10px;
}
Peço desculpas pela grande quantidade de 'estilo' que é independente do assunto em questão. Mas pode haver acoplamento entre o estilo que estou usando e a transição com falha, então estou incluindo o código completo. É também um menu muito mais bonito com o estilo :)