myeongsooKim myeongsooKim - 27 days ago 7
CSS Question

w3schools example for overflow:hidden

I already know about overflow:hidden that It hide text when text can't be filled in border. but I don't know why the following coding need it.

This code creates navigation bar but if I erase overflow:hidden, It doesn't work. I want to know about this happening. hidden works for what?
please help.



ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>




Answer

its about float left when child has this property then parent leave child's height property so then ul tag invisible becouse that have no height so us like this

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}
li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Hope this helps you THANKS