Bootstrap 5导航栏下拉菜单hover时出现多余白色下划线问题

使用Bootstrap 5搭建网站导航栏，通过自定义CSS实现了Services下拉菜单的hover展开效果，但hover该下拉菜单时，其下方除了预期的橙色下划线外，还出现了多余的白色下划线。

Test.html #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


  </head>
  <body>
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
      <div class="container">
        <a href="/index.html">
          <img src="./assets/logo-topnav.png" height="45" width="225" class="img-fluid"/>
        </a>

        <!-- TOGGLE MENU START -->
        <button
          type="button"
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navmenu"
        >
          <span class="navbar-toggler-icon">
        </button>
        <!-- TOGGLE MENU CLOSE -->

        <!-- TOGGLE MENU START -->
      <div class="collapse navbar-collapse" id="navmenu">
        <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a href="/index.html" class="nav-link text-white">Home</a></li>
        <li class="nav-item"><a href="/about.html" class="nav-link text-white">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link dropdown-toggle text-white" href="/services.html" role="button"  aria-expanded="false" id="servicesDropdown">
          Services
          </a>
          <ul class="dropdown-menu">
          <!-- <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li> -->
          <!-- <li><hr class="dropdown-divider"></li> -->
          <li><a class="dropdown-item   text-white" href="/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white " href="/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white" href="/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white" href="/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white " href="/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white " href="/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white " href="/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/contact.html" class="nav-link text-white">Contact</a></li>

        <script>
          // Get the Services dropdown link element
          const servicesDropdown = document.getElementById('servicesDropdown');
        
          // Redirect to the services page when the dropdown link is clicked
          servicesDropdown.addEventListener('click', function(event) {
            event.preventDefault(); // Prevent default link behavior
            window.location.href = this.getAttribute('href');
          });
        
          // Add the hover effect on desktop devices
          if (window.matchMedia('(min-width: 576px)').matches) {
            // When the mouse enters the dropdown link, show the dropdown menu
            servicesDropdown.addEventListener('mouseenter', function() {
              this.setAttribute('aria-expanded', 'true');
              this.nextElementSibling.classList.add('show');
            });
        
            // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
            servicesDropdown.addEventListener('mouseleave', function() {
              this.setAttribute('aria-expanded', 'false');
              this.nextElementSibling.classList.remove('show');
            });
          }
        </script>
        <!-- TOGGLE MENU CLOSE -->

        
        </ul>
      </div>
      <!-- TOGGLE MENU CLOSE -->
      </div>
    
    </nav>
    <!-- NAVIGATION BAR CLOSE -->
  </body>
</html>

Test.css #

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }
}

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    opacity: 0;
    transition: all 0.2s;
    height: 2px;
    width: 100%;
    background: hsl(18, 100%, 62%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.nav-link:hover::after {
    opacity: 1;
}

多余的白色下划线是浏览器默认给<a>标签（即.nav-link）添加的hover状态下划线，和自定义的橙色伪元素下划线叠加导致的。只需修改.nav-link的样式，去掉默认的文本下划线即可：

.nav-link {
    position: relative;
    text-decoration: none; /* 去掉默认链接下划线 */
}

.nav-link:hover {
    text-decoration: none; /* 确保hover时也不会出现默认下划线 */
}

修改后的完整CSS：

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }
}

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

.nav-link {
    position: relative;
    text-decoration: none; /* 新增：去掉默认链接下划线 */
}

.nav-link:hover {
    text-decoration: none; /* 新增：hover时保持无默认下划线 */
}

.nav-link::after {
    content: '';
    opacity: 0;
    transition: all 0.2s;
    height: 2px;
    width: 100%;
    background: hsl(18, 100%, 62%);
    position: absolute;
    bottom: 0;
    left: 0;
}

.nav-link:hover::after {
    opacity: 1;
}

这样就能只保留自定义的橙色下划线，消除多余的白色下划线。

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