Dropdown menu vanishing when hovering over background text - css

Question

I can't utilize the main dropdown menu on the site I'm developing because if you move too slowly or if you mouse over text that is in the background in the child element behind it, it will vanish.
I've tried adding !important tags. I've tried looking for any gaps between elements. I've tried adjusting the z axis priority values.
.dropdown {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropdown:hover .dropdown-content {display:block !important;}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar:hover .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar:hover .second {
opacity: 0;
transition: all 0.5s;
}
.navbar:hover .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar:hover {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
</style>
<div class="dropdown" style="background-color:black;">
<button class="dropbtn" style="background-color:black;">
<div class="navbar">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
</body>
</html>
I'd like for the drop menu to be relatively resilient to vanishing. It's not, it's almost unusable.

Answer 1

Click menu now!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dropdownzzz {
position: fixed;
top: 1vmin;
left: 1vmin;
width: 10vmin;
height: 10vmin;
display: inline-block;
}
.dropbtn {
background color: black;
color: black;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 99999;
}
.dropdown-content a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block !important;
}
.dropdown-content a:hover {background-color: red;}
.header {
position: fixed;
top: 1vmin;
width: calc(100vw - 14vmin);
height: 10vmin;
transform: translate(11vmin, 0vmin);
text-align: center;
padding: 0vmin;
vertical-align: middle;
dislpay: table-cell;
}
.header a {
float: left;
font-size: 4vmin;
color: white;
text-align: center;
vertical-align: middle;
padding: 1vmin 1vmin;
text-decoration: none;
}
table {
table-layout: auto;
width: 100%;
border: 1vmin solid black;
}
td {
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
td a:hover {background-color: red;}
.navbar {
width: 10vmin;
height: 10vmin;
position: relative:
border: 0.5vmin solid #49b293;
cursor: pointer;
transition: all 0.3s ease;
}
.navbar div {
height: 0.8vmin;
width: 6vmin;
background-color: #fff;
position: absolute;
transition: all 0.5s ease;
}
.navbar .first {
top: 2.5vmin;
left: 2vmin;
}
.navbar .second {
top: 4.5vmin;
left: 2vmin;
}
.navbar .third {
top: 6.5vmin;
left: 2vmin;
}
.navbar.active .first {
width: 4vmin;
transform: translate(0vmin, 4.75vmin) rotate(50deg);
transition: all 0.5s;
}
.navbar.active .second {
opacity: 0;
transition: all 0.5s;
}
.navbar.active .third {
width: 4vmin;
transform: translate(2.25vmin, 0.5vmin) rotate(-50deg);
transition: all 0.5s;
}
.navbar.active {
border-radius:5vmin;
transition: all 0.3s ease;
}
.mainbody {
position: relative;
width: 100%;
top: 13vmin;
z-index:1;
}
.dropdown-content.active {
display: block;
}
</style>
<div class="dropdownzzz" style="background-color:black;">
<button class="dropbtn" style="background-color:black;" id="menu">
<div class="navbar" id="iconmenu">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</button>
<div class="dropdown-content" id="there">
Link 1
Link 2
Link 3
</div>
</div>
<div class="header" style="background-color:black;">
<table style="background-color:black;">
<tr>
<td>Home</td>
<td>IT</td>
<td>Science</td>
<td>Tech</td>
<td>News</td>
<td>Top</td>
</tr>
</table>
</div>
<div class="mainbody">
<h1>RoyHQ</h1>
</div>
<script>
$('#menu').on('click', function () {
$('#there').toggleClass('active');
$('#iconmenu').toggleClass('active');
});
</script>