Dropdown menu with overflow inside overflow hidden parent

Question

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 1

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.

Answer 2

An alternative solution would be to replace the ul with a select element. The select element always seems to get rendered as you would hope the drop down list to be rendered, above and outside the parent element if necessary. You'll need to do some styling to make it look nice though. Looking at your example above I'm not sure if a select would be flexible enough for your display requirements as you have a list within a list.

<div id="parent">
    <select name="select">
      <option value="value1">Value 1</option> 
      <option value="value2" selected>Value 2</option>
      <option value="value3">Value 3</option>
    </select>
</div>

Uttam Kaddam's solution of giving the ul a high z-index and making it's position absolute did not work for me as I have several lists within the same parent element, actually drop downs on a table headers, which messed up the display of the table headers.