During creating horizontal menu in CSS why there is used overflow: hidden to make this menu visible?
type here
I Would like to know why should we use overflow:hidden same as in example below:
1
-
Please provide enough code so others can better understand or reproduce the problem.Community– Community Bot2023-11-24 18:48:16 +00:00Commented Nov 24, 2023 at 18:48
Add a comment
|
1 Answer
The <li> elements inside the <ul> have the style
float: left;
When an element is given any float styles, they are no longer in the document's normal flow. When you set overflow as hidden, you are creating a block formatting context. This contains all the floated elements, preventing the container from collapsing.
If you remove the overflow:hidden style, you'll see that the other <li> elements are gone until you hover over them.
By using overflow:hidden, you make sure that the parent container expands to contain its floated children.
Removing the style means that the parent container (<ul>) does not contain the floated children anymore, due to which they become invisible. Hovering over them just triggers the :hover styles.
