What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Blocks getting invisible


New member
Hi everyone,

I'm a super beginner and I'm learning HTML and CSS.
I have this code for style and the mystery I cannot wrap my head around why the whole list disappears when I take out the "overflow: hidden" line or change its value to visible or scroll etc.

I also read that overflow attribute functions only with blocks when the size is set but in this code I don't see any sizing.
Here is the link to the full code: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

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;


Thanks in advance for a short explanation.