CODEWITHSUNDEEP
jquerycssoverflowsubmenu
Omegakenshin
Omegakenshin

Reputation: 311

Submenu not showing - overflow hidden?

my problem is that I got 3 submenus in the third nav named "Productos", but they are not showing.

I think maybe the error got something with the jQuery plugin kwicks... making it overflow:hidden;

I'm kinda new so I will appreciate your help ^^

Here is the link to the website

Edit: I remove the kwicks and I can see the submenu but I need the kwicks, Is there someway to bypass that??

Upvotes: 5

Views: 2594

Answers (2)

Nikita Rybak
Nikita Rybak

Reputation: 68016

Your li#kwick_3 element has overflow: hidden set in html, which overrides overflow:visible set in css. When I disable this setting in firebug, submenu options show themselves.

You can also set overflow: visible !important for #kwick_1, #kwick_2, #kwick_3, .. in your style.css to override setting in html (again, works for me in firebug).

Upvotes: 1

Lorenzo
Lorenzo

Reputation: 29427

Using Chrome I can see half of your first menu that has a text like "Maquinaria". I think that the menu is going to show inside its container.

Have you tried setting an higher z-index?

I have also checked with Developer tool and the overflow is correctly set to visible.

EDIT:

This is the code generated at runtime:

<li id="kwick_3" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute; left: 225px; width: 200px; overflow-x: hidden; overflow-y: hidden; display: block; " class="active">
    <a class="headlink" href="#">Productos<h3>Nuestros productos</h3></a>
    <ul style="visibility: visible; display: block; ">
       <li><a href="#">Maquinaria pesada</a></li>
       <li><a href="#">Transporte</a></li>
       <li><a href="#">Agroindustria</a></li>
    </ul>
</li>

The UL element has an overflow (x and y) set to visible. but the parent LI element has its overflow (x and y) set to hidden

Upvotes: 2

Related Questions