CODEWITHSUNDEEP
css
Atara
Atara

Reputation: 3569

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

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]

Upvotes: 1

Views: 167

Answers (3)

Rob
Rob

Reputation: 15160

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.

Upvotes: 0

Danield
Danield

Reputation: 125521

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.

Upvotes: 4

Aayushi Jain
Aayushi Jain

Reputation: 2879

Add this to your CSS:

.menuInPage ul 
{
height: 200px;
}

Upvotes: 0

Related Questions