我正在尝试重新创建在《 World War Z》电影网站上找到的类似菜单效果，但是我似乎无法正常运行CSS过渡。我已经获得了hover元素来显示隐藏的块，但是CSS过渡无法正常工作。我试图获得一种可以从顶部或底部滑动的炫酷效果，但我没有特定的偏好。另外，如果我尝试浏览任何链接，则子菜单会消失，然后才能单击它。这是小提琴。
HTML：
<ul id="menutitle">Menu Title</ul>
<ul id="submenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
CSS：
#topmenu {
background: #000;
width: 150px;
height: 50px;
color: #fff;
}
#submenu {
display: block;
position: absolute;
width: 110px;
display: none;
background: #333;
list-style: none;
line-height: 2em;
}
#menutitle:hover + #submenu {
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
#menutitle { color: #ff0000; }
a { color: #FF0; }
一些东西：
您的:hover选择器应位于#topmenu元素上，而不是标题上。这就是为什么导航区域突然消失的原因-只需将鼠标悬停在菜单文本上即可。
您可能对动画属性定义有些误解。您需要选择一个特定的属性进行动画处理。通常是“高度”之类的东西。在这种情况下，我的解决方案是设置“最大高度”。可能有一些将高度设置为“自动”之类的方法，但如果这样，它就对我不起作用了。
另外，“ transition”属性始终设置在对象上-不仅是“悬停时”。指示“当此属性更改时，进行平滑过渡”是一种恒定状态。这样，您可以具有一系列具有不同高度的不同状态。
#topmenu {background: #000; width: 150px; height: 50px; color: #fff; }
#submenu {display: block;
position: absolute;
width: 110px;
background: #333;
list-style: none;
line-height: 2em;
overflow: hidden;
max-height:0;
transition: max-height 0.7s ease-in;
}
#topmenu:hover #submenu {
max-height: 200px;}
#menutitle {color: #ff0000;}
a {color: #FF0}
目前，我现在意识到的我的版本的一个问题是，由于最大高度动画化为200px，因此导航菜单在达到200像素之前将被完全展开，从而使动画不太流畅。也许您可以根据自己的需要进行调整。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句