:after and :hover issue, do not affect whole element - css

Question

I have this code: https://codepen.io/anon/pen/QdQEQW
As you can see, if you hover over "Dropdown" it also changes the background color of "V", the :after part. I do not want that. Simple. But I just can't get it done. I've googled and tried and tried but I just cant figure out how.
I've tried a bunch of different, variations, eg
.onclick-menu:hover.onclick-menu:after {
background: blue;
}
.onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover > onclick-menu:after:hover {
background: blue;
}
.onclick-menu:hover + onclick-menu:hover:after {
background: blue;
}

Answer 1

It seems to me that you want the following:
#top {
background: black;
line-height: 39px;
}
#top nav a {
color: #21262F;
padding: 10px 15px;
background: green;
}
#top nav a:hover {
background: red;
}
.onclick-menu {
position: relative;
display: inline-block;
}
.onclick-menu:after {
content: "V";
background: green;
margin-left: -4px;
padding: 8px 10px;
}
.onclick-menu:hover:after {
background: green;
}
.onclick-menu:focus {
outline: none;
pointer-events: none;
}
.onclick-menu:focus .onclick-menu-content {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.onclick-menu-content {
position: absolute;
z-index: 1;
background: #F4F4F4;
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
}
<div id="top">
<nav>
Hey
<div tabindex="0" class="onclick-menu">
Dropdown
<ul class="onclick-menu-content">
<li>Look, mom</li>
<li>no JavaScript!/li>
<li>Pretty nice, right?</li>
</ul>
</div>
Support
</nav>
</div>
For clarity's sake, this is the one:
.onclick-menu:hover:after {
background: green;
}
I don't understand why you added .onclick-menu twice in that selector in the first place. It's the pseudo element of the same item, so you don't need to repeat the parent.