如何摆脱Bootstrap 4导航栏样式

<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css"> -->

.navbar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
  color: #333;
  font-weight: bold;
}

.navbar-nav .nav-link {
  color: #333;
}

.navbar-nav .nav-link:hover {
  color: #007bff;
}

<nav class="navbar">
  <a class="navbar-brand" href="#">Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>

<nav class="navbar">
  <!-- 导航栏内容 -->
</nav>

<script>
  // 下拉菜单交互效果
  $('.nav-link').hover(function() {
    $(this).siblings('.dropdown-menu').toggle();
  });
</script>