0

This code works like that. But when I remove overflow property from ul element browser shows nothing. Why?

I have some understanding of overflow, but didn't understand why this code is like that?

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Nurlan_Jalilov
  • 1
  • 3

1 Answers1

-1

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

li {
  display: inline-block;
  height: 10px;
  width: 50px;
  margin: 10px;
}

li a {
  color: white;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  background-color: red;
}
<ul>
  <li><a 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>

Overflow is only used when the text does not fit in. so no need of overflow or floats. The below snippet works. Also, some CSS classes were not required.

Also, please go through MDN docs instead of chatGPT.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}
li{
  display: inline;
}
li a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
</style>
<ul>
  <li><a 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>
tennis
  • 31
  • 8