"Drop-Up" Menu for my Code - html

Question

So I created a drop-down menu using only CSS and I've positioned them on my header and footer, my problem is how can I make my menu display above my button instead of under it(only for footer button). Any ideas?
CSS
.d_button {
color: #FFFFFF;
background-color: #222222;
border: none;
cursor: pointer;
font-size: 80%;
font-weight: bolder;
line-height: 50%;
padding: 8px;
}
.drop_top {
position: inherit;
display: inline-block;
background-color: #222222;
float: right;
}
.drop_bot {
position: inherit;
display: inline-block;
background-color: #222222;
float: left;
}
.drop_content {
display: none;
position: absolute;
right: 14px;
background-color: #222222;
min-width: 80px;
}
.drop_content a {
color: #FFFFFF;
padding: 5px;
text-decoration: none;
display: block;
}
.drop_content a:hover {
color: #03A9F4;
}
.drop_top:hover .drop_content {
display: block;
}
.drop_bot:hover .drop_content {
display: block;
}
<div id="header_container">
<div id="header">
Header Content
<div class="drop_top">
<button class="d_button">
<div id="nav_icon" class="top">☰</div>
</button>
<div class="drop_content">
A
B
C
</div>
</div>
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer_container">
<div id="footer">
Footer Content
<div class="drop_bot">
<button class="d_button">
<div id="nav_icon" class="bottom">☰</div>
</button>
<div class="drop_content">
A
B
C
</div>
</div>
</div>
</div>
Thanks

Answer 1

Ok so first things first is that this dropdown that you have will more than likely not work because your dropdown menu will only show when you hover on the button and not when you hover on the actual dropdown menu. So your dropdown menu will appear but when you go to try and click on the links once you remove the cursor from the dropdown button the menu disappears. That being said to create a css dropdown menu you will want to wrap both the dropdown button and the dropdown menu in a container and then position this container as relative. Then you can position the dropdown menu as absolute and you can control the position of this absolute positioned div inside the relative positioned div with top, right, left, and bottom in your css. Hopefully that makes sense. So I have created a fiddle for you to view the proper technique for createing a dropdown menu.
Here is the fiddle Fiddle
First you will start with the following markup for your dropdown menu
<div class="dropdown">
<button class="dropdown-button">☰</button>
<div class="dropdown-menu">
Link
Link
Link
</div>
</div>
Then the following Css:
.dropdown{
position:relative;
}
.dropdown-menu{
position:absolute;
top:100%;right:0;
min-width:80px;
background:#000;
display:none;
}
footer .dropdown-menu{
bottom:100%;top:auto;left:0;right:auto;
}
.dropdown:hover .dropdown-menu{
display:block;
}
.dropdown-menu a{
display:block;
color:#fff;
padding:5px;
text-decoration:none;
}
.dropdown-button{
border:none;
background:#222;
color:#fff;
outline:0;
cursor:pointer;
padding:10px;
}
header .dropdown{float:right}
footer .dropdown{float:left;}
Then you can see in this css I have positioned the footers dropdown menu to have the following css bottom:100%;top:auto;left:0;right:auto; so you can control the placement of an absolute positioned div inside of a relative positioned div accordingly.