This is my HTML code.
body {
text-align: center;
}
ul {
overflow: hidden;
background-color: #1d6b0d;
list-style-type: none;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
padding: 0.5rem;
}<h3>HTML Horizontal Unordered List</h3>
<ul>
<li><a href="#course">Course</a></li>
<li><a href="#Blog">Blogs</a></li>
<li>
<a href="#Content">Content</a>
</li>
</ul>This is the output.
I changed overflow to visible.
Now this is the output.
According to what I studied, overflow:visible must make the overflowed content visible. But,
here in my code, visible is making the list disappear. hidden is making the list visible. I tried asking AI, but did not get any satisfactory answer.
Why is overflow:hidden making the list visible?
3
By default, the overflow of elements is set to visible. When you use overflow: hidden; the element disappears from view but is not removed.
However, when you use the float property, you may encounter many problems because float itself changes the element’s height, width, and display properties to move the element across the container. Therefore, you should avoid using the float property. If you do use it, remember to set display: flex; (or display: table;) on the parent element <ul>.
I highly recommend that you stop using float and switch to Flexbox instead.
5