SCSS下拉菜单性能问题

Question

我正在尝试使用该菜单的模板构建一个下拉菜单：https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar

但是，在我的浏览器中，下拉菜单在悬停时响应速度很慢，如果可以的话，这是什么原因呢？

注意：代码（下拉菜单的功能和设计）正在运行，但是与w3Schools示例相反，它在悬浮时非常闪烁。

这个问题的一个非常具体的例子是，当我将鼠标从悬停稍微移开并移回悬停时，悬停根本不会激活下拉功能。

SCSS（部分内容仅包含用于简单设计的mixin和变量声明，不会对性能产生很大影响。）：

@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;
      }
}

，随后将SCSS直接编译为链接到CSS的CSS文件：

#ULTRAHEADER { 
    background: $linear-gradient-facebook-dark;
    & h1 {
        text-align: left;
        margin-left: 40px;
    }
    @include dropdown-template;
}

和相关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>

请询问您需要的其他信息，谢谢