我已经搜索了此问题的答案，但是在所有问题/答案中，我发现它们都无法解决我的问题。
我所拥有的是一个“超级菜单”，左侧具有链接，当其中一个链接用鼠标悬停时，它会向右扩展，显示带有图像的隐藏链接。我想做的是将左侧的“ hableable”链接区域扩展为与包含图像的右侧区域相同的大小。
目前，左侧是固定高度，当我尝试应用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', '');
}
);
对于纯CSS来说，这是不可能的，就像我想要的当前结构一样，所以我决定使用下面的jQuery解决方案。
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句