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

Question

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?

score 4 · Accepted Answer · edited May 23 '17 at 10:31

4

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.

edited May 23 '17 at 10:31

Community

1
1

answered Jul 28 '13 at 13:46

Danield

121,619
37
226
255

score 0 · Answer 2 · answered Jul 28 '13 at 13:23

0

Add this to your CSS:

.menuInPage ul 
{
height: 200px;
}

answered Jul 28 '13 at 13:23

Aayushi Jain

2,861
2
29
36

Thanks, but the height is not fixed, and cannot be calculated easily. – Atara Jul 29 '13 at 07:19

score 0 · Answer 3 · answered Jul 28 '13 at 13:56

0

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.

answered Jul 28 '13 at 13:56

Rob

14,746
28
47
65

thanks. If I remove the float, i do not get some coloumns. only one coloumn. but it does set the border. – Atara Jul 29 '13 at 07:19

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

3 Answers3