Navbar文本选择矩形与下拉菜单位置问题修复求助

问题说明 #

做Navbar时碰到两个问题：

1. 鼠标悬停菜单项（比如Company）时，底部的绿色高亮条紧贴文本，像下划线，想让它精准贴在Navbar的下边缘
2. 下拉菜单位置太高，和Navbar重叠了

当前效果：

想要的效果：

自己怀疑是Navbar或菜单项的padding/margin、line-height导致的，但找不到具体原因。

相关代码 #

HTML #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

<!-- Navbar con logo e link -->
<nav class="navbar navbar-expand-md navbar-dark mb-0">
  <div class="container">
    <a class="navbar-brand d-flex align-items-center" href="#">
            <img src="img/..." alt="Logo" class="logo">
            <div class="brand-text">
                <span class="fondazione">AAAAAAA</span>
                <span class="surname">XXXX</span>
            </div>
        </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a>
          <div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown">
            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a>
            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a>
            <a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a>
          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 4</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 5</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 6</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 7</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Item 8</a></li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

CSS #

* {
  box-sizing: border-box;
}

/* Navbar */
.navbar {
  background-color: #000033;
  padding: 0px 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
}

/* Stile logo e testo del brand */
.logo {
  height: 80px;
  margin-right: 10px;
}

.brand-text {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  line-height: 1;
}

.fondazione {
  font-size: 0.80em;
  font-weight: normal;
  letter-spacing: 0.28em;
}

.surname {
  font-size: 2.4rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* Rettangolino colorato sotto le voci della navbar */
.navbar-nav .nav-link {
  color: #ffffff;
  margin-right: 10px;
  padding: 0 10px;
  line-height: normal;
  position: relative;
}

.navbar-nav .nav-link:hover::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: #459439;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

/* Rimozione della freccia dropdown */
.nav-link.dropdown-toggle::after {
  display: none;
}

/* Dropdown orizzontale */
.dropdown-menu-horizontal {
  display: none;
  background-color: #000033 !important;
  padding: 20px !important;
  min-width: 100%;
  border-radius: 0;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 9999;
}

.dropdown-item-horizontal {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  margin-right: 30px;
  white-space: nowrap;
}

.dropdown-item-horizontal img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
}

.dropdown-item-horizontal:hover {
  color: #d4d4ff;
  text-decoration: none;
}

/* Mostra il menu a tendina al passaggio del mouse */
.nav-item:hover .dropdown-menu-horizontal {
  display: flex;
  justify-content: space-around;
}

/* Responsive per dispositivi mobili */
@media (max-width: 768px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

JavaScript #

document.addEventListener("DOMContentLoaded", function() {
  const dropdowns = document.querySelectorAll(".nav-item.dropdown");

  dropdowns.forEach(dropdown => {
    dropdown.addEventListener("mouseenter", function() {
      const menu = this.querySelector(".dropdown-menu-horizontal");
      if (menu) menu.style.display = "flex";
    });

    dropdown.addEventListener("mouseleave", function() {
      const menu = this.querySelector(".dropdown-menu-horizontal");
      if (menu) menu.style.display = "none";
    });
  });
});

修复方案 #

问题根源在于.nav-link没有垂直内边距，导致它的高度仅和文本一致，高亮条的bottom:0是相对于文本块而非Navbar；同时下拉菜单的定位父元素.nav-item高度不足，造成菜单和Navbar重叠。修改以下CSS即可解决：

1. 给菜单项添加垂直padding，匹配Navbar高度 #

修改.navbar-nav .nav-link的padding，让菜单项高度和80px的logo对齐：

.navbar-nav .nav-link {
  color: #ffffff;
  margin-right: 10px;
  padding: 30px 10px; /* 上下各30px，加上文本高度刚好匹配80px的Navbar */
  line-height: normal;
  position: relative;
}

这样高亮条的bottom:0就会精准贴在Navbar的下边缘，不再紧贴文本。

2. 确保下拉菜单定位基准正确 #

给.nav-item添加相对定位，让下拉菜单以它为基准定位，避免重叠：

.nav-item {
  position: relative;
}

此时.dropdown-menu-horizontal的top:100%就会准确位于.nav-item的底部，也就是Navbar的下方，不会再重叠。

可选：调整Navbar的padding #

把.navbar的padding:0px 0改成padding:0，更简洁：

.navbar {
  background-color: #000033;
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
}

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