Why Can't an <Ul> (With Absolute Position) Inside a <Li> (With Relative Position) Auto Size

Why can't an ul (with absolute position) inside a li (with relative position) auto size?

There's one stupid thing: on the submenus, you can force the sumbenus to the inner items width by simply forcing whitespace: no-wrap on the inner items. It works despite any technique or layout you are using -- main LI items with display: inline-block, or modern flex layouts // and for the subs, regular display none/block or modern css3 fx solutions -- it doesn't matter. A raw example can be just this, in this case using flexbox and fadein/out fx for subs (but could be anything more simple no-flexbox or older, it really doesn't matter):

.main-menu{ // ul
  display: flex;
  flex-wrap: nowrap;

  > li{
    display: inline-block;
    flex: 1;
    position: relative;

    &:hover{
      .sub-menu{
        visibility: visible;
        opacity: 1;
        transition: opacity 200ms linear;
      }
    }

    .sub-menu{
      display: inline-block;
      position: absolute;
      top: 50px;
      left:0;

      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 200ms, opacity 200ms linear;

      li{
        a{
          white-space: nowrap; // <<< THIS IS THE KEY!
        }
      }
    } // sub-menu

  } // > li
}

Child position absolute parent relative doesn't work

Absolute position elements are removed from the document flow. So the parent's height will hold only the other elements. Not the absolute position elements.

If you want your parent to cover your absolute position element then you have to set a fixed height to the parent element. You can set top: 0; like other's have answered. But still your parent's height wont be determined by the absolute positioned element, that's the reason the ul is outside the nav.

How to get auto-height from position: absolute element?

You can't size the .parent with the absolutely positioned .child as absolute positioning removes the element from the box model.

If you're tied to this markup structure you can use javascript to set the height of the .dropdown to be the same as the height of the .child

(I used jquery)

something like :

$(".parent").hover(function() {
    x = $(this).find(".child").height();
$(this).parent('.dropdown').css({
    'height': x + 'px'
   });
 }, function() {
  $(this).parent('.dropdown').css({
    'height': 'auto'
  });
});

I here's (a very janky) pen to demonstrate what I mean.
http://codepen.io/NeilWkz/pen/YWwpgJ

Positioning absolute element outside of the relative parent container

Use a containing element to apply scroll:

.list-wrapper {    height: 100px;    overflow: auto;    padding-top: 30px;}
li {    position: relative;    height: 40px;}
.tooltip {    position: absolute;    visibility: hidden;    bottom: 45px;}
li:hover>.tooltip {    visibility: visible;}

<div class="list-wrapper">    <ul>        <li>some data            <span class="tooltip">Lots of data</span>        </li>        <li>some data2            <span class="tooltip">Lots of data</span>        </li>        <li>some data            <span class="tooltip">Lots of data</span>        </li>        <li>some data2            <span class="tooltip">Lots of data</span>        </li>        <li>some data            <span class="tooltip">Lots of data</span>        </li>        <li>some data2            <span class="tooltip">Lots of data</span>        </li>        <li>some data            <span class="tooltip">Lots of data</span>        </li>        <li>some data2            <span class="tooltip">Lots of data</span>        </li>    </ul></div>

Setting position:absolute prevents me from clicking links in one div?

Put z-index: 999; on the #sidebar element. It is because another element on your page is positioned in the same area but has a higher stack order.

Example: http://jsfiddle.net/bxCT8/

---

Related Topics