Simple dropdown menu with CSS in a navba - html

Question

I'm trying to create a simple dropdown menu (with only CSS) in a navbar with multiple links, the problem is that the dropdown menu will show with every link and not only with the desired one. Here is the code:
HTML & CSS
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
}
.dropDown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.topNav .mainLink:hover .dropDown {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">&#9776</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
The dropdown will have to show only on the "menuIcon" link.

Answer 1

You already have an ID on the <a> tag you want to trigger the :hover so use that as reference selector. Also your code doesn't work because .dropDown ins't a child of your link change it to match as sibling:
#menuIcon:hover ~ .dropDown
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav:after {
content:"";
display:table;
clear:both;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
background:#e1e1e1;
display: none;
position: absolute;
top:100%;
z-index: 1;
min-width: 160px;
}
.dropDown a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuIcon:hover ~ .dropDown, .dropDown:hover {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">&#9776</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>