使用box-sizing属性时,jQuery superfish在ul标签上添加溢出？

Question

我有一个奇怪的问题,jQuery superfish菜单插件在使用时一切正常,animation: {opacity: 'show'}并且应用于ul元素的内联样式是:

display: none; visibility: hidden;

我想用animation: {height: 'show'} ,但使用它的下拉菜单时,仅显示第1级的下拉菜单,因为快鱼是添加overflow: hidden;到ul应用元素和内联样式:

display: none; overflow: hidden; visibility: hidden;

所以问题是overflow: hidden;阻止嵌套的ul元素在悬停时显示,所以我尝试添加overflow: visible !important;哪个修复了问题,但菜单的行为是缓慢的,我不想要这个解决方案.

所以我发现* {box-sizing: border-box;}我的css文件内部正在发生这种行为,当删除时,superfish不会添加overflow: hidden;到ul元素.

我在codepen上创建了一个demo:http://codepen.io/anon/pen/Awqdn

发生了什么:

animation: {opacity: 'show'}即使我有,1- 工作正常* {box-sizing: border-box;}

2- animation: {height: 'show'}因为插件中添加到ul元素的溢出隐藏而无法工作,* {box-sizing: border-box;}从css文件中删除时会解决此问题.

那么我该如何解决这个问题呢？什么overflow: hidden;时候有超级鱼加水box-sixing: border-box;？

并提前感谢.

Answer 1

没有* {box-sizing: border-box;}它overflow:hidden在动画期间给出并在动画结束后删除它.但是使用这一行,它不会在动画后删除溢出.我在jQuery跟踪器http://bugs.jquery.com/ticket/10335找到了票

要解决此问题,您可以在动画后删除溢出

jQuery(function($) {
  $('#nav').superfish({
    animation: {height:'show'},
    onShow: function(){
      $(this).css("overflow", "visible");
    }
  });
});

http://codepen.io/anon/pen/Apqyl