使父容器成为悬停子容器的高度

Question

I have searched for the answer to this but out of the questions/answers I found none of them worked in my case.

What I have is a "Mega Menu" with links down the left side, when one of the links are hovered with the mouse it expands to the right showing hidden links with images. What I would like to do is have the left side "hoverable" link area expand to be the same size as the right side area that contains the images.

Currently the left side is a fixed height and when I attempted to apply clear: both overflow: hidden as the other answers on questions suggested it broke the layout. I am hoping there is a pure CSS way of doing what I need. I could write it in JS but would prefer not to if its not needed. I have included a codepen that shows what I have currently.

https://codepen.io/anon/pen/wGZjpp?editors=1100

<div class="megaMenuWrapper">
  <div class="megaMenuContainer" style="display: block;">
    <ul id="menu-main-menu" class="menu">
      <div class="background"><span class="megamenu-title">SHOP BY CATEGORY</span>
        <li class="category-item" id="menu-item-3"><a href="#">Showers</a>
          <ul class="sub-menu right-side">
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-4">
                  <a href="#"><img src="http://placekitten.com/180/180">Shower Stalls</a>
                </li>
                <li id="menu-item-8">
                  <a href="#"><img src="http://placekitten.com/180/180">Shower Bases</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-5">
                  <a href="#"><img src="http://placekitten.com/180/180">Shower Walls</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="category-item" id="menu-item-9"><a href="#">Toilets</a>
          <ul class="sub-menu right-side">
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-10">
                  <a href="#"><img src="http://placekitten.com/180/180">Bidets</a>
                </li>
                <li id="menu-item-11">
                  <a href="#"><img src="http://placekitten.com/180/180">Portable Toilets</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-17">
                  <a href="#"><img src="http://placekitten.com/180/180">Bed Pans</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="category-item" id="menu-item-16"><a href="#">Bathtubs</a>
          <ul class="sub-menu right-side">
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-18">
                  <a href="#"><img src="http://placekitten.com/180/180">Clawfoot</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-19">
                  <a href="#"><img src="http://placekitten.com/180/180">Copper</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="category-item" id="menu-item-20"><a href="#">Sinks</a>
          <ul class="sub-menu right-side">
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-21">
                  <a href="#"><img src="http://placekitten.com/180/180">Modern</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="category-item" id="menu-item-25"><a href="#">Bathroom Accessories</a>
          <ul class="sub-menu right-side">
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-22">
                  <a href="#"><img src="http://placekitten.com/180/180">Bathtub Faucets</a>
                </li>
                <li id="menu-item-27">
                  <a href="#"><img src="http://placekitten.com/180/180">Shower Curtains</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-23">
                  <a href="#"><img src="http://placekitten.com/180/180">Toilet Brushes</a>
                </li>
                <li id="menu-item-28">
                  <a href="#"><img src="http://placekitten.com/180/180">Vanities</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-24">
                  <a href="#"><img src="http://placekitten.com/180/180">Toilet Seats</a>
                </li>
              </ul>
            </li>
            <li class="menu-item">
              <ul class="sub-menu">
                <li id="menu-item-26">
                  <a href="#"><img src="http://placekitten.com/180/180">Mirrors</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </div>
    </ul>
  </div>
</div>

CSS:

body{
  background: #ddd;
}

ul#mainnav>li>a:not(.last) {
    border-right: 1px solid #fff;
}

ul#mainnav>li>a {
    padding: 5px 15px;
    margin-top: 20px;
}

.megaMenuWrapper {
    position: relative;
    margin-top:30px;
}

.megaMenuContainer {
    position: absolute;
    width: 100%;
    /* display: none; */
    z-index: 2;
    /* height: auto; */
}

ul#menu-main-menu {
    width: 100%;
    height: 100%;
    position: relative;
    margin:0;
    list-style: none;
}

ul#menu-main-menu .background > li:first-of-type {
    margin-top: 5px;
}

.background {
    width: 20%;
    height: 100%;
    background: rgb(255, 255, 255);
    border-right: 2px solid #000;
}

.column.menu-item {
    padding: 1%;
    width: 23%;
}

ul.sub-menu {
    list-style: none;
    margin: 0;
}

.right-side {
    position: absolute;
    top: 0;
    left: 20%;
    height: auto;
    right: 0;
    width: 80%;
    display: none;
}

.right-side li.menu-item {
    float: left;
    width: 23%;
    padding: 1%;
    height: 100%;
}

.megamenu-title {
    color: #545454;
    margin-top: 20px;
    display: inline-block;
    width: 100%;
    margin-left: 20px;
    font-weight: bold;
}

li.category-item a{
    padding: 5px 0px 5px 20px;
    display: block;
}
li.category-item a:hover {
    background-color: white;
    color: #3C3C3C !important;
    text-decoration: none;
}

li.category-item a:hover + ul,
.right-side:hover
 {
    display: block;
    background: rgb(255, 255, 255);
    border-left: 1px solid #000;
}

ul#menu-main-menu li.menu-item ul.sub-menu li a {
    color: #3c3c3c;
    padding: 0;
    text-align: center;
}

ul#menu-main-menu li.menu-item ul.sub-menu li a:hover {
    background: none;
}

ul#menu-main-menu li.menu-item ul.sub-menu li img {
    display: block;
    margin: 0 auto;
}

ul#menu-main-menu li a {
    color: #4C4C4C;
}

UPDATE:

This is ultimately the jQuery that I have ended up going with. Unless someone answers with a pure CSS solution.

$('.category-item').hover(
    function() {
        var height = $(this).children('.right-side').outerHeight();
        $('.megaMenuContainer').height(height);
    },
    function() {
        $('.megaMenuContainer').css('height', '');
    }
);

Answer 1

the idea is the following :

.megaMenuContainer {
  height:auto;
}

.category-item {
  height:2em;
}

.category-item:hover {
  height:3em;
}

in fact if you put the height of the parent equal to auto the height of the child element will follow it.

Answer 2

This is not possible with pure CSS like I wanted with the current structure so I decided to go with the jQuery solution below.

$('.category-item').hover(
    function() {
        var height = $(this).children('.right-side').outerHeight();
        $('.megaMenuContainer').height(height);
    },
    function() {
        $('.megaMenuContainer').css('height', '');
    }
);