CSS过渡 - 高度舒适

Question

我有这个导航菜单纯粹由CSS驱动.它扩展了鼠标悬停并在鼠标移出时折叠.我想要的功能是保持菜单打开,直到另一个按钮悬停.

是否可以通过简单地使用CSS或我是否需要使用jQuery或JavaScript？

我修改了一个扩展的垂直导航菜单,当CSS更改高度值时,缓动效果不起作用.每个导航元素的内容不同,并且具有固定值,无法获得所需的结果.

如果它只能CSS在这里完成,那就更好了,这里是JSFiddle.

Answer 1

我的解决方案是在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; 
}