CODEWITHSUNDEEP
cssoverflow
Rakesh
Rakesh

Reputation: 139

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

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.

Upvotes: 0

Views: 360

Answers (2)

achref
achref

Reputation: 1220

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.

Upvotes: 1

StefanBob
StefanBob

Reputation: 5128

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.

Upvotes: 0

Related Questions