CSS转换-高度轻松
CSS转换-高度轻松
提问于 2014-04-25 19:08:57
我有这个导航菜单，这是纯粹由CSS驱动的。它在鼠标悬停时展开，在鼠标移出时折叠。我想要的功能是保持菜单打开，直到另一个按钮悬停。
是否可以简单地使用CSS，或者我是否需要使用jQuery或JavaScript？
我修改了一个扩展的垂直导航菜单，当CSS中的高度值改变时，缓动效果不起作用。每个Nav元素的内容是不同的，固定的值不能得到预期的结果。
如果只能在CSS中完成就更好了，这里是JSFiddle。
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-25 19:27:09
我的解决方案是在li元素上设置高度转换，而不是在ul上，这样您就不必推断总高度。
下面是一个可行的解决方案：http://jsfiddle.net/siorge/w55rZ/2/
编辑以显示代码：
/*ul Styles*/
.menu-item ul li {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow:hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover li {
height: 32px;
border-bottom: 1px solid #eee;
}Stack Overflow用户
发布于 2014-04-25 20:02:25
不设置"height: 0;“设置"max-height: 0;”，然后打开:hover set "max-height: 500px;“
http://jsfiddle.net/w55rZ/7/
.menu-item ul {
/* Remove delay by setting transition delay to -0.25s */
-webkit-transition: all 1s -0.25s ease-out;
-moz-transition: all 1s -0.25s ease-out;
-o-transition: all 1s -0.25s ease-out;
-ms-transition: all 1s -0.25s ease-out;
transition: all 1s -0.25s ease-out;
max-height: 0;
}
.menu-item:hover ul {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease ;
max-height: 500px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23291335
复制相关文章
相似问题
腾讯云开发者
