https://i.sstatic.net/iuNB7.png
<span id="priority-dot-open-menu">
<span id="priority-menu">
<span class="tooltip-top"></span>
<span id="priority-dot-blue"></span>
<span id="priority-dot-yellow"></span>
<span id="priority-dot-red"></span>
</span>
</span>
/* The hidden popup menu */
#priority-menu {
display: none;
position: absolute;
top: 150%;
left: -50%;
border: 3px solid #f1f1f1;
z-index: 9;
max-width: 300px;
padding: 10px;
background-color: white;
}
#priority-dot-open-menu {
position: relative;
height: 25px;
width: 25px;
background-color: blue;
border-radius: 50%;
display: inline-block;
opacity: 0.8;
cursor: pointer;
}
#priority-dot-open-menu:hover {
opacity: 1;
}
The column (#priority-menu) with the 3 dots is a child of the dot above (#priority-dot-open-menu) for positioning purposes. However, it's inheriting unwanted properties like opacity and hover effects. What would be the best solution to rectify this issue? https://jsfiddle.net/moq2bwLj/ (please note that the menu does not open on js fiddle, it's purely for code-viewing purposes. Thank you!