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

问题

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?

回答1:

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

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

回答2:

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...

来源：https://stackoverflow.com/questions/26294501/css-dropdown-menu-isnt-shown-even-though-absolutely-positioned-because-of-overf

标签

html

css

drop-down-menu

overflow