Mega Menu and divs with equal height

Problem

I have been working on a mega menu which so is fully functional except one design issue.

I need to grow submenu wrapper div with the text which is place inside another wrapper.

At present my sub menu text appear out the container.

jsFiddle Eaxmple and jsfiddle Full window view

Outer div class=dropdown nested div class=dd-panel

In fiddle example Menu One > Sub Menu Two text shows up outside div with class dropdown wrapper. I want it to grow outer div to grow with the nested elements.

I tried changes properties but nothing working i might be doing something wrong somewhere.

Do we need to do it with jquery or it is possible with css.

Problem courtesy of: Learning

Solution

As explained on mdn, position: absolute elements are removed from the normal flow for computing width and height of other elements (siblings, parents).

Your problem is that your .dd-panel elements are placed with this attribute, and will not count against their .dropdown parent's height.

I don't see a pure css solution to this. I would add code to the

$(".dropdown ul li").mouseenter()

callback to compute the height of the ul, the height of the displayed .dd-panel, and set the .dropdown's height to the max of these two.

[edit] For some reason I haven't identified, .dd-panel elements will not return their true height when using $().height(). With your fiddle, you can get the "correct" height from your .media-caption nodes.

fiddle


A remark on your code : instead of

$(".dropdown ul li").each(function()
     $(this).mouseenter(function(){ ...

you can simply write :

$(".dropdown ul li").mouseenter(function(){ ...

or use event delegation :

$(".dopdown").on("mouseenter", "ul li", function(){ ...
Solution courtesy of: LeGEC

Discussion

check this fiddle i have added padding-bottom to your .dd-panel class

Discussion courtesy of: Shahil

This recipe can be found in it's original form on Stack Over Flow.