Я много пробовал и уже искал в Google, но я не нашел решения для своей проблемы:
Я сделал jsfiddle для вас, чтобы увидеть исходный код: нажмите здесь для моего исходного кода
Все работает нормально. Но переход не работает в Firefox.
Вот мой исходный код, потому что я должен опубликовать его, если я хочу использовать jsfiddle!
<nav>
<ul>
<li><a href="#" class="active">Startseite</a></li>
<li><a href="#">Projekte</a>
<ul>
<li><a href="#">Java / Bukkit</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">PHP | MySQL</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Über mich</a></li>
</ul>
<div class="clear"></div>
</nav>
//CSS вниз \\HTML вверх
nav{
background: #333;
color: #fff;
padding: 5px;
}
nav ul{
padding: 0px;
margin: 0px;
list-style: none;
}
nav ul li{
float:left;
}
nav ul li a{
color: #fff;
background: #585858;
padding: 10px;
margin-right: 5px;
display: block;
text-decoration: none;
border: 1px solid white;
}
nav ul li a.active{
background: #373737;
}
nav ul li a:hover{
color: #333;
background: #fff;
border: 1px solid black;
}
nav ul li ul{
position: absolute;
height: 0px;
overflow: hidden;
}
nav ul li ul li{
float: none;
}
nav ul li:hover ul{
overflow: visible;
}
nav ul li:hover ul li a{
padding: 10px;
}
nav ul li ul li a{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
padding: 0px 10px;
}
Похоже, что удаление overflow:hidden
от контейнера внезапно заставляет переход работать. Это заставляет меня полагать, что это "оптимизация" в Firefox, которая не вычисляет "скрытый" элемент.
Лично я использовал это для создания аналогичного эффекта: вместо того, чтобы скрывать элемент, дайте ему transform:scaleY(0);
обычно и transform:scaleY(1);
при наведении.