Why should I add "overflow: hidden" to make the navigation bar visible on the page?
I am new to css and have been struggling with the following problem of my code all morning. I would really appreciate it if someone can help me figure out the reason.
Why does the navbar disappear completely from the page if I don't set the "overflow" "ul.navBar" to "hidden"?
<html>
<head>
<style>
ul.navBar {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #4277f4;
cursor: pointer;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
</style>
</head>
<body>
<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
<div class="dropDownContent">
<a href="#">Product1</a>
<a href="#">Product2</a>
<a href="#">Product3</a>
</div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</body>
</html>
Here is the code page for this navigation bar .
source to share
Why does the navigation bar disappear completely from the page if I don't set
overflow
fromul.navBar
tohidden
?
This is because the elements of the child .navBar
are laid out. Floating elements are taken out of the normal document flow and do not take up space. Since children occupy free space, .navBar
it has no height.
The addition overflow: hidden;
launches a new block formatting context that prevents .navBar
children from being "flushed" when it floats.
Some people suggest using display: inline-block;
. Use with care, as each element will have free space around it, making them larger than you think. Especially when using percentage widths.
Example:
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 33.3333%;
}
.inline li {
display: inline-block;
background-color: gold;
}
.float li {
float: left;
background-color: indianred;
}
.flex {
clear: left;
display: flex;
background-color: skyblue;
}
<ul class="inline">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="float">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul class="flex">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here are some options on how to handle whitespace if you choose a route inline-block
.
source to share
Floated elements (yours li
in this case) are ul
0 pixels high. So your element is 0 pixels high.
Adding display: inline-block
to your elements li
allows you to fix this. Therefore, no style is required overflow
for yours ul
.
ul.navBar {
list-style-type: none;
margin: 0px;
padding:0px;
background-color: #4277f4;
cursor: pointer;
}
li {
display:inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
<body>
<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
<div class="dropDownContent">
<a href="#">Product1</a>
<a href="#">Product2</a>
<a href="#">Product3</a>
</div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
source to share
The problem is you float your elements li
, which results in having ul
no height. Use instead display:inline-block;
.
ul.navBar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #4277f4;
cursor: pointer;
}
li {
display:inline-block;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
text-decoration: none;
}
li:hover {
background-color: #A2AEB3;
}
.dropDownContent {
display: none;
position: absolute;
background-color: #7DC9E3;
width: 150px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
text-decoration: none;
}
.dropDownContent a {
color: white;
display: block;
}
.dropDownContent a:hover{
background-color: #4A96B0;
}
li.dropDownBtn:hover .dropDownContent{
display: block;
}
<ul class="navBar">
<li><a href="#">Home</a></li>
<li class="dropDownBtn"><a href="#">Products</a>
<div class="dropDownContent">
<a href="#">Product1</a>
<a href="#">Product2</a>
<a href="#">Product3</a>
</div>
</li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
source to share