I am experiencing a challenge with creating a dropdown for the navigation menu on my mobile view. The anchors are overlapping and my attempt to stack them on top of each other using display block and margin-bottom has not been successful as evidenced by the issue persisting.
html
<div id="brand">
<h1>brand</h1>
<nav>
<div class="fa fa-plus"></div>
<div class="fa fa-cog">
<a href="#">Edit Profile</a>
<a href="#">Dashboard</a>
</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;
}
View the demonstration on jsfiddle
What could be a potential solution to this issue?