如何修复Materialize CSS下拉菜单的异常黑框问题？

我在学习Materialize CSS时遇到问题：鼠标悬停在下拉菜单上时会出现奇怪的黑框，需要移除它。

关联代码 #

<nav class="blue darken-4">
    <div class="container">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo">FSPN</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Home</a></li>
                <li><a href="#">About FSPN</a></li>
                <li><a href="#" class="dropdown-trigger" data-target="practice-menu">Practice <i class="fa-solid fa-caret-down fa-sm right"></i></a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <ul id="practice-menu" class='dropdown-content'>
            <li><a href="#">Corporate Law</a></li>
            <li><a href="#">Banking & Finance</a></li>
            <li><a href="#"> Litigation & Arbitration</a></li>
            <li><a href="#">Conveyance & Real Estate</a></li>
            <li><a href="#">Loan Recoveries & Restructuring</a></li>
            <li><a href="#">Mining, Oil & Gas</a></li>
            <li><a href="#">Tax Law</a></li>
            <li><a href="#">Regulatory</a></li>
        </ul>
    </div>
</nav>

解决步骤 #

这个黑框是Materialize默认给下拉菜单元素添加的outline样式，通过自定义CSS覆盖即可：

1. 基础移除代码

.dropdown-content li:hover,
.dropdown-content li:focus {
    outline: none !important;
}

2. 针对链接的精准移除
   如果上面的代码没生效，可直接针对下拉菜单的链接设置：

.dropdown-content li a:hover,
.dropdown-content li a:focus {
    outline: none !important;
}

3. 提高优先级（若仍不生效）
   如果存在CSS优先级冲突，给选择器加上父类提升权重：

nav .dropdown-content li:hover,
nav .dropdown-content li:focus {
    outline: none !important;
}

内容的提问来源于stack exchange，提问作者marick