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; 
}

Answer 2

而不是设置＆＃34; height：0;＆＃34; set＆＃34; max-height：0;＆＃34;然后开启：悬停设置＆＃34;最大高度：500px;＆＃34;

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;
}

CSS过渡 - 高度舒适

2 个答案: