Geek Answers Handbook

JQuery superfish adding overflow hidden in ul tags when using box-sizing property?

I am having a strange problem with the superfish jQuery menu plugin. Everything works correctly when using animation: {opacity: 'show'} , and the inline styles applied to ul elements:

display: none; visibility: hidden;

I want to use animation: {height: 'show'} but when using it, the drop-down menu shows only the first level drops, because the superfish adds overflow: hidden; to ul elements, and applied inline styles:

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

therefore, the problem of overflow: hidden; , which prevents the display of nested ul elements on hover, so I tried adding overflow: visible !important; , which fixed the problem, but the menu behavior is sluggish and I do not want this solution.

So, I found that * {box-sizing: border-box;} inside my css file does this behavior, when deleted, the superfish does not add overflow: hidden; to elements ul.

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

A brief description of what is happening:

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

2- animation: {height: 'show'} does not work due to overflow of the hidden plugin added to ul elements, and this problem is fixed when * {box-sizing: border-box;} removed from the css file.

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

And thanks in advance.

+4
source share
2 answers

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

To fix this problem, you can remove the overflow after the animation

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

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

+5
source

Maybe use 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 */
+1
source

More articles:


All Articles