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

the meaning of overflow is to hide the overflow.. You can restructure and put it outside the parent.. — EricG, Dec 01 '12 at 12:47
Possible duplicate of [CSS ignore overflow: hidden](https://stackoverflow.com/questions/7074114/css-ignore-overflow-hidden) — ericsoco, Oct 24 '17 at 16:33
Dupe of https://stackoverflow.com/questions/7074114/css-ignore-overflow-hidden, and there's an answer there with more explanation as to why it works (https://stackoverflow.com/a/9379435/222356) — ericsoco, Oct 24 '17 at 16:34

score 7 · Accepted Answer · answered Dec 01 '12 at 12:49

7

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.

answered Dec 01 '12 at 12:49

Uttam Kadam

458
1
7
20

2

There is no need for the z-index – ctor Dec 01 '12 at 12:51
1

indeed. but i didnt expect this to work :/ even though it does xD – EricG Dec 01 '12 at 12:53
a { color: white; } #parent-wrapper { width: 500px; position: relative; float:left; } #parent { height: 100px; background: blue; display:block; } .dropdown ul { width: 100px; display: none; padding: 50px; background: black; z-index: 2000; position: absolute; } – Uttam Kadam Dec 01 '12 at 13:10

score 2 · Answer 2 · answered Dec 17 '13 at 16:58

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.

score 0 · Answer 3 · edited Jul 17 '13 at 11:19

0

a {
    color: white;
}
#parent-wrapper {
    width: 500px;
    position: relative;
    float:left;
}
#parent {
    height: 100px;
    background: blue;
    display:block;
}
.dropdown ul {
    width: 100px;
    display: none;
    padding: 50px;
    background: black;
    z-index: 2000;
    position: absolute;
}

edited Jul 17 '13 at 11:19

Praveen

55,303
33
133
164

answered May 17 '13 at 01:48

Dropdown menu with overflow inside overflow hidden parent

3 Answers3