SCSS drop-down menu performance issue - html

Question

I'm trying to build a drop-down menu with the template of this menu: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
However, in my browser, the dropdown menu is slow to respond at hover, if it does at all, what is the any reason for this?
Note: The code (functionality and design of drop-down menu) is working but it's very flickery when it catches the hovering, as opposed to the w3Schools example.
A very specific example of the problem is that when I move the mouse slightly away from hovering and back into hovering, the hovering doesn't activate drop-down feature at all.
SCSS (Partials contain only mixin & variable declaration for simple design stuff, not expected to influence performance very much.) :
#import 'color';
#import 'box-shadow';
#import 'border';
#mixin dropdown-template() {
ul {
list-style-type: none;
margin: -10px 150px 0 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
}
li a, .dropbtn {
display: inline-block;
color: $netflix-black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: $netflix-red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
max-width: 200;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
}
& the SCSS later directly compiled to CSS-file linked in CSS:
#ULTRAHEADER {
background: $linear-gradient-facebook-dark;
& h1 {
text-align: left;
margin-left: 40px;
}
#include dropdown-template;
}
& relevant HTML:
<header id="ULTRAHEADER">
<h1>Principles</h1> <!-- The Meta-Title above 4 AoL -->
<ul>
<li class="dropdown"><a class="dropbtn">Spiritual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Relationship</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Physical</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Intellectual</a>
<div class="dropdown-content">
<a href="markups/IntPrinHTML/BoostOdds.html">
Boost your odds of success through de-centralized principle-guided decision-making.
</a>
<a href="markups/IntPrinHTML/ApplyPrin.html">
Apply Principles in Comple Sub-systems of Reality
</a>
<a href="markups/IntPrinHTML/BoostOdds.html">
Learn, Grow, Evolve. Be Anti-Fragile.
</a>
</div>
</li>
</ul>
</header>
Please ask for whatever other info you need, thanks