html - CSS 过渡 - 高度缓解

Question

我有一个完全由 CSS 驱动的导航菜单。它在鼠标悬停时展开，在鼠标移开时折叠。我想要的功能是保持菜单打开，直到悬停另一个按钮。

仅使用 CSS 是否可行，还是我需要使用 jQuery 或 JavaScript？

我修改了一个扩展的垂直导航菜单，当 CSS 中的高度值发生变化时，缓动效果不起作用。每个Nav元素的内容都不同，固定值得不到想要的结果。

如果只用 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; 
}