Menu
I'm a newbie to css and have been struggling with the following problem of my code for the whole morning. I would really appreciate it if someone can help me find out the reason.
Why does the navigation bar totally disappear from the page if I don't set the "overflow" of "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's the code page for this navigation bar.
546
Why does the navigation bar totally disappear from the page if I don't set the
overflowoful.navBartohidden?
This is happening because the child elements of .navBar are being floated. Floated elements are taken out of the normal document flow and do not take up space. Because the children take up no space .navBar has no height .
Adding overflow: hidden; triggers a new block formatting context that prevents .navBar from "collapsing" when it has floated children.
Some people will suggest using display: inline-block;. Use with caution as each element will have white space around it that will make 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's some options on how to handle the white space if you chose the inline-block route.
144
Floated elements (your li in this case) have a height of 0. So, essentially, your ul element is 0 pixels tall.
Adding display: inline-block to your li elements allow for this to be corrected. Therefore, the overflow style for your ul is not required.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
