My dropdown menu keeps appearing when I don't want it too - html

Question

So, I got a navigation bar with dropdown menus. Whenever I move my cursor where the drop-down menu is hidden, it opens, and I need to disable that without disabling the drop-down menu as a whole. Any tips on how to do that?
If you want to go ahead and look at the latest version of my website can be found below.
Here's the link: https://p1ayerone.github.io/
And here's the CSS code:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
:root {
--background: rgba(54, 57, 63, .85);
}
*,
*::before,
*::after {
margin: 0px;
padding: 0px;
box-sizing: inherit;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: url(../../img/bg/bg.png) fixed center;
background-attachment: fixed;
background-position: center;
font-family: 'Roboto', sans-serif;
font-weight: 400;
box-sizing: border-box;
color: silver;
}
.content {
height: 200vh;
background-size: cover;
display: grid;
place-items: center;
}
/* navigation styles start here */
header {
z-index: 999;
width: 100%;
right: 0%;
top: 0%;
position: fixed;
}
.logo {
margin: 0;
color: silver;
list-style: none;
}
.img-logo {
margin-right: 15px;
padding-top: 8px;
margin-bottom: -10px;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: left;
margin-top: 3.5%;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
.nav {
text-transform: uppercase;
font-size: 1.2rem;
background: var(--background);
padding-bottom: 1.7%;
}
.nav::after {
content: "";
display: table;
clear: both;
}
.nav-main {
float: right;
list-style: none;
margin-bottom: -21px;
padding-bottom: -15px;
}
.nav-main-item {
display: inline-block;
width: 12rem;
position: relative;
}
li {
list-style: none;
}
.nav-main a {
text-align: center;
padding: 1rem;
color: #eee;
text-decoration: none;
display: block;
}
.nav-main-item a:hover {
background-color: gray;
}
.nav-main-item:hover > * {
opacity: 1;
margin: 0;
}
.navi-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.more-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.destiny-intro-p {
padding-left: 100px;
font-size: 1.3rem;
}
.destiny-intro-h1 {
font-size: 3rem;
}
.body-block {
background-color: black;
color: white;
padding-bottom: 6%;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
z-index: 999;
width: 100%;
right: 0%;
top: 0%;
position: fixed;
}
.logo {
margin: 0;
color: silver;
list-style: none;
padding-top: 15;
}
.nav {
text-transform: uppercase;
font-size: 1.2rem;
background: var(--background);
}
.nav::after {
content: "";
display: table;
clear: both;
}
.nav-main {
float: right;
list-style: none;
}
.nav-main-item {
display: inline-block;
width: 10rem;
position: relative;
}
.nav-main a {
text-align: center;
padding: 1rem;
color: white;
text-decoration: none;
display: block;
}
.nav-main-item a:hover {
background-color: silver;
}
.nav-main-item:hover > * {
opacity: 1;
margin: 0;
}
.navi-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.Discord {
float: right;
}
.gif-Destiny {
width: 200px;
float: right;
color: silver;
}
.Zachary {
color: black;
text-decoration: none;
}
.introduction {
color: black;
}
.footer {
background-color: #1F2E4B;
color: white;
text-align: center;
font-size: 20px;
float: center;
margin-top: 100%;
}
.CbZD{
color: #00FFFF;
font-size: 30px;
}
}
.Discord {
float: right;
}
.img-Destiny {
padding-top: 0px;
width: 300px;
float: right;
color: black;
}
.Zachary {
color: black;
text-decoration: none;
}
.introduction {
color: black;
}
.footer {
background-color: #1F2E4B;
color: white;
text-align: center;
font-size: 20px;
float: center;
}
.CbZD{
color: #00FFFF;
font-size: 30px;
}
/* Videos */
.tse {
color: #07FC1B;
text-align: center;
}
/* Characters */
.img-TBG {
background-color: white;
color: black;
float: left;
width: 300px;
height: 500px;
}
/* Applications */
.silver-box {
background-color: silver;
color: black;
height: 1400px;
width: 640px;
}
/* About Me */
.abtme {
width: 50%;
margin: 0 auto;
}
/* Links */
.contact-me {
color: silver;
}
.gmail-footer {
color: silver;
}
.twitter-footer {
color: silver;
}
/* Contact */
.contact-title {
margin-top: 100px;
color: white;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-title h1 {
font-size: 32px;
line-height: -10px;
}
.contact-title h2 {
font-size: 16px;
}
form {
margin-top: 50px;
transition: all 4s ease-in-out;
}
.form-control {
width: 600px;
background: var(--background);
border: none;
outline: none;
border-bottom: 1px solid gray;
color: white;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}

Answer 1

Instead of using opacity:0 and opacity:1 to display the dropdown, you can use display:none and display:inline-block. When using opacity, it doesn't remove the element from the page, which is why the dropdown would appear when hovering in that area.
Can read more about this here https://magnusbenoni.com/difference-between-display-visibility-opacity/
.nav-main-item:hover > .navi-main-item {
display: inline-block;
margin: 0;
}
.navi-main-item {
display: none;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}