1
私はこれに対する答えを探しましたが、質問/回答の中で私のケースではうまく機能していませんでした。親コンテナをホバリングされた子コンテナの高さにします
私が持っているのは、左側にリンクがあるメガメニューです。リンクの1つがマウスでホバリングされると、画像に隠れたリンクを示す右側に拡大されます。私がしたいのは、左側にある「ホバリング可能な」リンク領域を、画像を含む右側の領域と同じサイズに拡張することです。
現在、左側は固定された高さです。clear: bothoverflow: 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;
}
UPDATE：
これは最終的に私が一緒に行くまで終了しているjQueryのです。誰かが純粋なCSSソリューションで答えない限り。
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);