Mark Boulder Mark Boulder - 3 years ago 197
CSS Question

Dropdown menu with overflow inside overflow hidden parent

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download