jQuery superfish adding overflow hidden on ul tags when using box-sizing property?

Question

I'm having a weird issue with jQuery superfish menu plugin everything is working properly when using animation: {opacity: 'show'} and the inline styles applied to ul elements are:

display: none; visibility: hidden;

I want to use animation: {height: 'show'} but when using it the drop down menu only shows 1st level drop downs because superfish is adding overflow: hidden; to the ul elements and the inline styles applied are:

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

so the problem is overflow: hidden; which is preventing the nested ul elements to show on hover so I tried adding overflow: visible !important; which fixed the issue but the behavior of the menu is sluggish and I don't want this solution.

So I found out that the * {box-sizing: border-box;} inside my css file is making this behavior, when removed, superfish doesn't add overflow: hidden; to the ul elements.

I created a demo on codepen: http://codepen.io/anon/pen/Awqdn

Summary of what's happening:

1- animation: {opacity: 'show'} works fine even if I have * {box-sizing: border-box;}

2- animation: {height: 'show'} doesn't work because of the overflow hidden added to ul elements by the plugin, and this problem is resolved when removing * {box-sizing: border-box;} from the css file.

So how can I fix this ? and whats making superfish add overflow: hidden; when I have box-sixing: border-box; ?

And thanks in advance.

Answer 1

Without * {box-sizing: border-box;} it gives overflow:hidden during the animation and removes it after animation ends. But with this line it don't remove overflow after animation. I have found ticket in jQuery tracker http://bugs.jquery.com/ticket/10335

To resolve this issue you can remove overflow after animation

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

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

Answer 2

Maybe use the clearfix hack instead of overflow:hidden;

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */