CODEWITHSUNDEEP
htmlcssdrop-down-menucss-position
rebel84
rebel84

Reputation: 81

CSS: Mega Menu - Absolute Height Issue

jsfiddle: https://jsfiddle.net/ms6g9c61/1

As you can see, the main menu list goes only 2 lines deep. I need its height (visually you can see the blue border) adjust accordingly to the submenu thats open. Each submenu is not the same height.

Any idea of how to do this? I'm really trying not to use JS.

I was thinking maybe change the mark up so instead of lists, we can change it to be divs that work like tables? I don't know if that works because of the absolute positioning. 1 standard height won't work either, it has to be able to adjust with the diff. submenus.

Here is the HTML:

body {
  margin: 15px;
}

.into {
  margin: 10px 0;
}

.menuList {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}

.menuList > li {
  background: white;
  border-right: 1px solid blue;
  width: 150px;
}

.subMenu {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
  background: pink;
  width: 400px;
}

.submenuList {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menuList > li:hover > .subMenu {
  display: block;
}
<p class="intro">
flyout menu w/ adjusting height<br/>
left menu must adjust in height to match submenu that appears to the right.
</p>

<ul class="menuList">
  <li>
    <a href="#">Category 1</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        </ul>
    </div>
  </li>
  <li>
    <a href="#">Category 2</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
  </li>
</ul>

Upvotes: 0

Views: 761

Answers (1)

HarryJR
HarryJR

Reputation: 36

just use position: relative for your elements. The upper MenuBox now resizes with the subitems.

I fiddled a bit for you:

CSS

body {
  margin: 15px;
}

.into {
  margin: 0;
}

.menuList {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}

.menuList > li {
  background: white;
  border-right: 1px solid blue;
  width: 150px;
}

.subMenu {
  display: none;
  top: 0;
  left: 151px;
  background: pink;
  width: 400px;

}

.submenuList {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menuList > li:hover > .subMenu {
  display: block;
    position: relative;
}

.menuBox {
  position: relative;
}

HTML

<p class="intro">
flyout menu w/ adjusting height<br/>
left menu must adjust in height to match submenu that appears to the right.
</p>

<div class="menuBox">
<ul class="menuList">
  <li>
    <a href="#">Category 1</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 1</a></li>
        </ul>
    </div>
  </li>
  <li>
    <a href="#">Category 2</a>
    <div class="subMenu">
      <ul class="submenuList">
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div>
  </li>
</ul>
</div>

Upvotes: 1

Related Questions