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