1
我已经搜索了这个答案，但是在问题/答案中，我发现其中没有一个适用于我的情况。使父容器成为悬停的儿童容器的高度
我所拥有的是一个带有向左链接的“Mega菜单”，当其中一个链接被鼠标悬停时，它向右扩展，显示与图像的隐藏链接。我想要做的是左侧的“可平移”链接区域扩展为与包含图像的右侧区域相同的大小。
目前左侧是固定高度，当我试图申请clear: bothoverflow: hidden作为其他问题的答案表明它打破了布局。我希望有一种纯粹的CSS方式来做我所需要的。我可以用JS写它，但不喜欢，如果它不需要。我已经包含了一个codepen，显示了我目前的状态。
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：
这是最终我已经结束了去了jQuery。除非有人用纯粹的CSS解决方案来回答。
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);