In the code why does removing overflow:hidden; from ul in css style, hides the menu?

Question

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

removing overflow:hidden; from ul in css style. The Menu disappears. I found the example on w3schools website, when i remove overflow:hidden from style in ul, the Menu is hidden.

It's still there, inspect the DOM with your favorite browser and check it out. — Nope, May 16 '17 at 15:17
yeah it's still there but why removing overflow affecting it? — Rakesh Senwar, May 16 '17 at 15:20
If you check the computed stats of the inspector in your browser you can see that the element `overflow: hidden`, in this case the `ul` receives a default height of `46px`, removing `overflow:hidden` leaves the height `0px` as you haven't specified one. As to why `overflow:hidden` does that, see this answer here ► http://stackoverflow.com/a/12783114/448144 — Nope, May 16 '17 at 15:27
As it seems your question is **why** `overflow:hidden` applies a height, then your question is a duplicate of [**Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?**](http://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t) — Nope, May 16 '17 at 15:29

score 1 · Accepted Answer · answered May 16 '17 at 15:28

1

Your menu didn't disappear, it is still there! You can inspect it like @Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.

answered May 16 '17 at 15:28

achref

1,150
1
12
28

I'm assuming it is because the question has already been answered several times on SO and could be linked to one of them as a duplicate instead? – Nope May 16 '17 at 15:31
It is up to the person that asks the question to see if it is duplicate or not. We are just trying to help... – achref May 16 '17 at 15:34
3

@StefanBob Even you should encourage vote to close for duplication, to ensure a central place for a well written answer to be used. Unless off course the linked duplicate does not answer the question. Furthermore, do **not** encourage "vote fixing" that obvious in public. "Vote Fixing" has resulted in up to 6 month ban from SO. – Nope May 16 '17 at 15:35
1

I agree with you @Fran,but they should just mark it as duplicate, not down voting a legit answer – achref May 16 '17 at 15:37
Yea why is the response to downvote our answers if they are correct, not knowing this is such a common question? Makes us feel like we did something wrong. Wouldn't be a need to "vote fix" lol (give me a break) – StefanBob May 16 '17 at 15:46

score 0 · Answer 2 · answered May 16 '17 at 15:26

ul is a block level element. When the li are floated they take up no space and therefore the height of the ul is reduced to 0.

Now declaring overflow (anything but visible) on the ul creates a new block formatting context, which makes the ul contain its children and not be 0px height anymore.

In the code why does removing overflow:hidden; from ul in css style, hides the menu?

2 Answers2