Transition effect creating a bug - html

Question

I am working on a horizontal dropdown navigation menu. I am using a transition to slow it down, but I've hit a bug. If you jump too fast (before the transition completes?) from one nav item to the other, you are still shown the other dropdown menu. It's a bit hard to explain - but I've created a CodePen.
I'm sure I'm just overlooking something basic... all feedback is appreciated. Thank you in advance!
CodePen link: https://codepen.io/zp12345/pen/mQzvXr
HTML
<div class="nav-links">
<ul class="nav-primary" id="nav-primary">
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item One</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>1.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>1.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Two</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>2.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>2.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Three</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>3.1</h5>
</a>
</li>
<li class="nav-dropdown-item">
<a href="#link">
<h5>3.2</h5>
</a>
</li>
</ul>
</li>
<li class="nav-item-top">
<a href="#link">
<span class="nav-item-label">Item Four</span>
</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a href="#link">
<h5>4.1</h5>
</a>
</li>
</ul>
</li>
</ul>
</div>
SCSS
.nav-primary {
display: flex;
flex-grow: 1;
justify-content: center;
list-style-type: none;
padding-left: 0;
}
.nav-item-top .nav-item-label {
color: #383838;
font-size: 18px;
padding: 0 24px;
cursor: pointer;
}
.nav-item-top {
&:hover {
.nav-item-label {
color: #319644;
}
.nav-dropdown {
visibility: visible;
opacity: 1;
padding: 16px 0;
}
}
}
.nav-dropdown {
width: 100%;
left: 0;
position: fixed;
top: 60px;
transition: .2s;
opacity: 0;
z-index: 3;
padding: 0;
background-color: #133751;
color: #133751;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
list-style-type: none;
.nav-dropdown-item {
transition: .2s;
padding: 12px 24px;
text-align: center;
color: #fff;
cursor: pointer!important;
}
h5 {
color: #fff;
margin: 0;
text-transform: none;
font-size: 16px;
}
}
.nav-dropdown-item {
a {
transition: all 0.2s;
text-decoration: none;
}
}

Answer 1

You can use transition-delay:0.2s; on hover when you show the .nav-dropdown. That will not show the dropdown when you move mouse fast.
You can test it here