The height of an horizontal ul is set to zero. why?

Problem

I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0

sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm

[compare the border of the floating menu of family 2, and the border of the UL in the page]

  • What is setting the height of horizontal ul to zero?
  • How can I show the border properly?
Problem courtesy of: Atara

Solution

Add overflow:hidden or overflow:auto to your class

#wrongBorder_because_of_no_Height
{
  overflow:hidden;
}

The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.

Check out this post for a full explanation.

Solution courtesy of: Danield

Discussion

Add this to your CSS:

.menuInPage ul 
{
height: 200px;
}
Discussion courtesy of: Aayushi Jain

You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.

Haven't checked to see if this is what you want but either remove the float or try overflow:auto.

Discussion courtesy of: Rob

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