Overlapping anchors on hover state - html

Question

I am trying to create a dropdown for my navigation in my mobile view. I am having an issue with the anchors overlapping. I attempted to stack them on top of one another by setting the display to block and adding a margin-bottom.
This has not worked as you can see.
html
<div id="brand">
<h1>brand</h1>
<nav>
<div class="fa fa-plus"></div>
<div class="fa fa-cog">
Edit Profile
Dashboard
</div>
<div class="fa fa-sign-out"></div>
<input type="search" id="main-q" name="q" placeholder="Search" data-value="" value="">
</nav>
</div>
css
nav .fa a {
display: none;
}
nav .fa:hover a {
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
#brand {
border-bottom: 1px solid #B2B2B2;
background: white;
color: darkgrey;
padding: 1em;
}
#brand h1 {
margin-bottom: .5em;
float: left;
}
jsfiddle demonstration
What is the solution?

Answer 1

Everything is fine. The main problem was to setting the position: absolute fora. Simply wrap those anchors a in UL li and then set the position for UL.
CSS:
nav .fa .child { /*modified CSS*/
display: none;
border:1px solid red;
}
nav .fa:hover .child { /*modified CSS*/
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
HTML
<div class="fa fa-cog">
<ul class="child"> <!--class child for dropdown-->
<li>Edit Profile</li>
<li>Dashboard</li>
</ul>
</div>
JSFIDDLE