Hover menu problems after moving main menu - html

Question

#header {
height: 108px;
width: 1140px;
background-color: #faa220;
position: relative;
}
#Logo2 {
height: 108px;
float: left;
}
#header links {
height: 50px;
float: left;
list-style: none;
padding-top: 10px;
}
#container {
overflow: hidden;
background-color: #faa220;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottom: 0;
right: 215px;
}
.container a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: absolute;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
cursor: pointer;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: #faa220;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #faa220;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
position: absolute;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: absolute;
bottom: 0;
}
.dropdown-content a:hover {
background-color: #faa220;
position: absolute;
bottom: 0;
}
.dropdown:hover .dropdown-content {
position: absolute;
display: block;
bottom: 0;
}
<div id="header">
<img src="../JPEG/i2i logo 2.jpg" align="left" id="Logo2" />
<div id="container">
<div class="dropdown">
<button class="dropbtn">Home</button>
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Bio
News
Partners
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Awards/Certifications</button>
</div>
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="dropdown-content">
Solar
Water
Housing
Training
Broadband
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">How You Can Help</button>
<div class="dropdown-content">
Donate
Volunteer
Intern
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Contact</button>
<div class="dropdown-content">
Email
FAQS
Newsletter
</div><!--dropdown-content-->
</div><!--dropdown close div-->
</div><!--container close div-->
I'm having problems with a hover menu after I moved the main menu. The div it's in is bigger than the menu div because of a logo. When I first coded the menu it was at the top of the div and the hover menu showed fine.
I moved the menu div to the bottom of the parent div using position absolute and relative, setting the bottom to 0 and right 215px. After that the hover menu started overlapping on the main menu. Any help is appreciated.

Answer 1

In order to make the Logo adapt to headers height:
#logo2 {
display: block;
width: auto;
height: auto;
max-height: 108px;
}
You have set the menu container to an absolute position, I had make it inline, so it does not stays over the logo:
- So remove the position: absolute; from the #container, and add following: line-height: 108px;, to center the menu vertically.
In order to make the logo slightly smaller than the header itself, at same time centering it, I've added following to the #logo:
max-height: 70px;
margin: 19px 10px 19px 10px;
#header {
height: 108px;
width: 1140px;
background-color: #faa220;
position: relative;
}
#Logo2 {
float: left;
display: block;
width: auto;
height: auto;
max-height: 70px;
margin: 19px 10px 19px 10px;
}
#header links {
height: 50px;
float: left;
list-style: none;
padding-top: 10px;
}
#container {
overflow: hidden;
background-color: #faa220;
font-family: Arial, Helvetica, sans-serif;
bottom: 0;
right: 215px;
line-height: 108px;
}
.container a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: absolute;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
cursor: pointer;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: #faa220;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #faa220;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: absolute;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: absolute;
bottom: 0;
}
.dropdown-content a:hover {
background-color: #faa220;
position: absolute;
bottom: 0;
}
.dropdown:hover .dropdown-content {
position: absolute;
display: block;
bottom: 0;
}
<div id="header">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/1200px-Coca-Cola_logo.svg.png" align="left" id="Logo2" />
<div id="container">
<div class="dropdown">
<button class="dropbtn">Home</button>
</div>
<!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Bio
News
Partners
</div>
<!--dropdown-content close div-->
</div>
<!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Awards/Certifications</button>
</div>
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="dropdown-content">
Solar
Water
Housing
Training
Broadband
</div>
<!--dropdown-content close div-->
</div>
<!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">How You Can Help</button>
<div class="dropdown-content">
Donate
Volunteer
Intern
</div>
<!--dropdown-content close div-->
</div>
<!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Contact</button>
<div class="dropdown-content">
Email
FAQS
Newsletter
</div>
<!--dropdown-content-->
</div>
<!--dropdown close div-->
</div>
<!--container close div-->
ps. i dont know what is up with the menu interaction, but you will know it probably.

Answer 2

Resolved part of the problem and managed to get the drop-down menu to actually show every of its items on top of each other. However I didn't find how to put its sub-menu's on the side (If that's what you wanted?) and make the menu actually drop down. Hopefully that'll put you on the right way.
Parts of the problem came from position and overflow properties.
#header {
height: 108px;
width: 1140px;
background-color: #faa220;
position: relative;
}
#Logo2 {
height: 108px;
float: left;
}
#header links {
height: 50px;
float: left;
list-style: none;
padding-top: 10px;
}
#container {
background-color: #faa220;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
bottom: 0;
right: 215px;
}
.container a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
position: absolute;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
cursor: pointer;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: #faa220;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #faa220;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
text-align: left;
position: static;
}
.dropdown-content a:hover {
background-color: #faa220;
position: absolute;
bottom: 0;
}
.dropdown:hover .dropdown-content {
position: absolute;
display: block;
bottom: 0;
}
<div id="header">
<img src="../JPEG/i2i logo 2.jpg" align="left" id="Logo2" />
<div id="container">
<div class="dropdown">
<button class="dropbtn">Home</button>
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Bio<br>
News<br>
Partners
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Awards/Certifications</button>
</div>
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="dropdown-content">
Solar<br>
Water<br>
Housing<br>
Training<br>
Broadband
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">How You Can Help</button>
<div class="dropdown-content">
Donate<br>
Volunteer<br>
Intern
</div><!--dropdown-content close div-->
</div><!--dropdown close div-->
<div class="dropdown">
<button class="dropbtn">Contact</button>
<div class="dropdown-content">
Email<br>
FAQS<br>
Newsletter
</div><!--dropdown-content-->
</div><!--dropdown close div-->
</div><!--container close div-->