Question

我已经搜索过这个问题的答案，但是我发现在我的案例中没有一个问题/答案。

我所拥有的是一个“Mega Menu”，左侧有链接，当其中一个链接用鼠标悬停时，它会向右展开，显示隐藏的图像链接。我想做的是将左侧“可悬空”链接区域扩展为与包含图像的右侧区域相同的大小。

目前左侧是一个固定的高度，当我尝试应用clear: both overflow: hidden作为其他答案的建议时，它打破了布局。我希望有一种纯粹的CSS方式来做我需要的东西。我可以在JS中编写它，但如果不需要则不愿意。我已经包含了一个显示我目前所拥有的代码。

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;
}

更新：

这最终是我最终使用的jQuery。除非有人用纯CSS解决方案回答。

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

Answer 1

这个想法如下：

.megaMenuContainer {
  height:auto;
}

.category-item {
  height:2em;
}

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

实际上如果你把父级的高度等于auto，那么子元素的高度就会跟着它。

Answer 2

对于纯CSS而言，这是不可能的，就像我想要的当前结构一样，所以我决定使用下面的jQuery解决方案。

compile sources

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

2 个答案: