I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality.
My attempt to create some distance by adding margin to the droplist resulted in triggering the hover function prematurely when hovering over that newly added space before reaching the droplist itself.
Below is the code snippet showcasing this issue...
/* STYLING FOR THE DROPLIST BUTTON */
.droplist {
position: relative;
display: inline-block;
user-select: none;
float: right;
}
.droplist button {
width: 150px;
border: none;
background-color: #585858;
transition-duration: 0.3s;
padding: 20px;
color: white;
font-family: "Arial";
}
.dropcontent {
display: none;
position: absolute;
background-color: #393939;
}
.dropcontent a {
display: block;
text-decoration: none;
color: white;
padding: 15px;
font-family: "Arial";
transition-duration: 0.1s;
min-width: 200px;
}
.droplist:hover button {
background-color: #333333;
transition-duration: 0.5s;
}
.droplist:hover .dropcontent {
display: block;
}
.dropcontent a:hover {
color: #C0C0C0;
transition-duration: 0.1s;
}
/* STYLING FOR THE DROPLIST BUTTON */<div class="droplist" style="margin: 10px; outline: none">
<button>GAMES</button>
<div class="dropcontent">
<a href="#">STICK FIGHT: THE GAME</a>
<a href="#">CLUSTERTRUCK</a>
<a href="#">SQUARE BRAWL</a>
<a href="#">NUCLEAR BUSINESS</a>
</div>
</div>