Dropdown menu with overflow inside overflow hidden parent
css, drop-down-menu, overflow
Solution
Please modify `<ul>` css as :
.dropdown ul {
width: 100px;
display: none;
padding: 50px;
background: black;
z-index:1000;
position:absolute;
}
This will take menu outside.
Problem
I have this dropdown menu that gets cut off due to #parent's overflow hidden. Is there a way to make the dropdown's overflowing part display outside #parent while keeping #parent's overflow hidden? http://jsfiddle.net/vXuuA/ ``` <div id="parent"> <ul> <li class="dropdown"> <a href="#">Lorem</a> <ul> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </li> </ul> </div> ``` and ``` a { color: white; } #parent { height: 100px; background: blue; } .dropdown ul { width: 100px; display: none; padding: 50px; background: black; } ``` and ``` $(".dropdown").hoverIntent({ over: function() { $("ul", this).show(); }, out: function() { $("ul", this).hide(); }, timeout: 500 }); ``` Requires: http://cherne.net/brian/resources/jquery.hoverIntent.minified.js