Databases
StackOverflow2013
Postsdbo
POjQuery superfish adding overflow hidden on ul tags when using box-sizing property?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery superfish adding overflow hidden on ul tags when using box-sizing property?
    text
    copied!<p>I'm having a weird issue with jQuery superfish menu plugin everything is working properly when using <code>animation: {opacity: 'show'}</code> and the inline styles applied to <code>ul</code> elements are:</p> <p><code>display: none; visibility: hidden;</code></p> <p>I want to use <code>animation: {height: 'show'}</code> but when using it the drop down menu only shows 1st level drop downs because superfish is adding <code>overflow: hidden;</code> to the <code>ul</code> elements and the inline styles applied are:</p> <p><code>display: none; overflow: hidden; visibility: hidden;</code></p> <p>so the problem is <code>overflow: hidden;</code> which is preventing the nested ul elements to show on hover so I tried adding <code>overflow: visible !important;</code> which fixed the issue but the behavior of the menu is sluggish and I don't want this solution.</p> <p>So I found out that the <code>* {box-sizing: border-box;}</code> inside my css file is making this behavior, when removed, superfish doesn't add <code>overflow: hidden;</code> to the ul elements.</p> <p>I created a demo on codepen: <a href="http://codepen.io/anon/pen/Awqdn" rel="nofollow">http://codepen.io/anon/pen/Awqdn</a></p> <p>Summary of what's happening:</p> <p>1- <code>animation: {opacity: 'show'}</code> works fine even if I have <code>* {box-sizing: border-box;}</code></p> <p>2- <code>animation: {height: 'show'}</code> doesn't work because of the overflow hidden added to ul elements by the plugin, and this problem is resolved when removing <code>* {box-sizing: border-box;}</code> from the css file.</p> <p>So how can I fix this ? and whats making superfish add <code>overflow: hidden;</code> when I have <code>box-sixing: border-box;</code> ?</p> <p>And thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload