CSS Dropdown menu isn't shown even though abso

问题:

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