I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case.
Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the right side. My goal is to make the left side hoverable link area expand to match the size of the right side area containing the images.
Applying clear: both and overflow: hidden as suggested in other solutions caused layout issues, so I am hoping to find a pure CSS solution. While I could write it in JavaScript, I would prefer not to unless absolutely necessary. You can view what I have currently on 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">
// More HTML code here
</ul>
</div>
</div>
CSS:
// CSS code here
UPDATE:
After exploring various options, I ended up using the following jQuery solution. However, I am still open to a pure CSS alternative if one becomes available.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);