CSS Drop-down menu enlarges the parent width, when on hover action - html

Question

I have the following Html file, together with the CSS file. When I hover over the Main Navigation bar to open the drop-down menu, the parent width enlarges together with the drop-down menu. How can I fix this? If I set position: absolute to the dropdown menu, it will not work at all.(hovering doesn't trigger the dropdown). I have put my code here: https://jsfiddle.net/L67oxmqc/2/ .
Thank you!
Code:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
float: left;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
/* position: absolute; */
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>

Answer 1

Just update in your style may it works for you
div.menu ul {
background-color: #a9bcba;
border-radius: 5px;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
div.dropdowncontent {
background-color: #a9bcba;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
width: 115px;
}

Answer 2

Here is a JSFiddle of the solution I mention below: https://jsfiddle.net/2sy0dn6w/
Fixing your solution is incredibly simple. You want to use position: absolute; for your div.dropdowncontent CSS class. You also want to make your parent li tag have position: relative; to keep your div.dropdowncontent constrained within the parent li. And then you have an issue with your primary ul tag with using overflow: hidden. This would prevent your dropdown from being seen. And I understand why you are using overflow: hidden; - you're using it as a clearfix. But in this case, it is a problem because it hides your dropdown. So instead we would want to use :before with the ul for the clearfix. The steps for applying the fixes are below.
First, remove overflow: hidden; from your css for div.menu ul {}. This will create the following:
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #a9bcba;
/*z-index: -1; */
}
Next, right after the div.menu ul {} CSS, add:
div.menu > ul::after {
clear: both;
display: table;
content: ' ';
overflow: hidden;
}
Lastly, at the very bottom of your CSS, add the following (you can even move each of the below to their designated declarations you already have in your CSS. The reason I'm adding this separate is so that it's more obvious what I included to give you the outcome you're looking for):
div.menu > ul > li {
position: relative;
}
.dropdowncontent {
position: absolute;
top: 100%;
}
li.dropdown:hover div.dropdowncontent {
display: block;
}

Answer 3

You have to use position absolute, you cant see it working because ul has overflow:hidden;
add this css :
.menu ul{
overflow:visible;
}
.menu ul li.dropdown{
position : relative;
}
.menu ul li.dropdown .dropdowncontent{
position : absolute;
top:38px;
left:0;
}

Answer 4

try this in your css:
add .menu class and remove bg-color from ul
.menu {
background-color: #a9bcba;
height: 45px;
}
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
//background-color: #a9bcba; <--- remove background
/*z-index: -1; */
}

Answer 5

Try this code below
Remove overflow hidden
div.menu ul{
...
overflow: hidden;
}
Add position absolute
div.dropdowncontent {
...
position: absolute;
}
replace float left
div.menu li{
/* float: left; */
display: inline-block;
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
display: inline-block;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
position: absolute;
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>