CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden

Question

I am trying to show a dropdown menu on hover, but I also have to apply an overflow: hidden to the parent element. The result is my dropdown, even though absolutely positioned, isn't visible (because of the overflow: hidden).

I reproduced the problem there: http://plnkr.co/edit/2rbaISwvzuKhyPEFpBKD?p=preview (you can hit Edit/Code edit to see the full source code)

(small sample)

#block-paddle-menu-display-first-level .menu_wrapper.level-2 {
  position: absolute;
  visibility: hidden;
}
#block-paddle-menu-display-first-level .has-children:hover .menu_wrapper.level-2 {
  visibility: visible;
  padding: 15px 0;
  background: black;
  width: 300px;
}

Under the "Hover Here -..." list-item, there's a nested ul which should be shown on hover..

requirements

The overflow: hidden on the parent is required for the arrows/sliding effect to work (it doesn't work perfectly on the test case but ignore that for now)
We need the menu background color to expand on the whole page

Related Questions but not 100% identical: Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

http://embed.plnkr.co/2rbaISwvzuKhyPEFpBKD/ refresh. I had disabled the overflow:hidden (work in progress) — George Katsanos, Oct 10 '14 at 08:02
This structure: `
` is invalid html. This is not causing your problems, but it's not good either. — Nico O, Oct 10 '14 at 08:14
@Paulie_D took me an hour to recreate this dude! appreciate. You only need to figure out why the dropdown isn't showing. Use the inspector, boom. — George Katsanos, Oct 10 '14 at 09:04
@NicoO what's invalid? the custom counter attribute? It's added via JS. Having a UL inside a UL I guess.. Thanks.. I'll take into account — George Katsanos, Oct 10 '14 at 09:06
I don't **need** to do anything. If you make it harder for me (or anyone else) to help you then you limit the amount of help you're gonna get. - http://stackoverflow.com/help/mcve — Paulie_D, Oct 10 '14 at 09:06
Cool, I removed 4 css files that weren't necessary and dozen of html classes on the divs. I still don't think I'll get much help cause this isn't a noob question;) — George Katsanos, Oct 10 '14 at 09:10

score 0 · Answer 1 · answered Oct 10 '14 at 08:19

0

block-paddle-menu-display-first-level{ overflow:visible;}

remove float from the li and add display:inline-block; Work your way from that point.

answered Oct 10 '14 at 08:19

Gho

570
2
9

That's a below the average answer. You can't drop one line of CSS and say "work your way from that point". Elaborate and I'll upvote. – George Katsanos Oct 10 '14 at 09:05
The answer I gave u fixes the problem YOU ASKED. The fact that on hover your whole bar glitches, isn't in this question. It was a polite way of telling you to fix your code. (And yes those 2 lines of code WILL fix your problem) – Gho Oct 10 '14 at 09:13
Check the plunk again. The dropdown like every other dropdown on the planet should be positioned absolutely. You obviously checked the wrong plunk version while I was working on it. – George Katsanos Oct 10 '14 at 09:15
And no, your answer doesn't fix the problem. I just tried it on the plunk itself. – George Katsanos Oct 10 '14 at 09:17
Ok...I just did...modified in firebug what I just said, and i can see the dropdown. (no one said to remove position absolute...) – Gho Oct 10 '14 at 09:17
Could you go to my plunk, click on Fork, add your code, send the url back? – George Katsanos Oct 10 '14 at 09:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/62805/discussion-between-gho-and-george-katsanos). – Gho Oct 10 '14 at 09:27

score 0 · Answer 2 · answered Oct 11 '14 at 14:04

The solution was to move the navigation bar inside the content container - and move the overflow: hidden to an element higher in the DOM - this way we ensure the height is enough for the dropdown to be shown, while still hiding the content that overflows the horizontal axis...

CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden

2 Answers2

Linked