我已经尝试了很多并且已经在 Google 中进行了搜索,但是我没有找到解决我的问题的方法:
我制作了一个 jsfiddle 供您查看我的源代码:Click here for my Source Code
一切正常。但是转换在 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) ;
悬停。
关于html - CSS 转换在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23079439/