有没有办法解决物化CSS下拉菜单上的这个框问题？

Question

我正在学习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>

Answer 1

我通过添加到 CSS 来修复

.dropdown-trigger{
border: none;
outline: none;

}