html - 如何在悬停时制作触及导航底部的边框

Question

我正在尝试设计我的菜单，但我遇到了一个小问题。我希望悬停时的红色边框触摸导航的边框底部。所以它看起来像这样：

我怎样才能得到这个效果？我已经尝试过，但我下面的代码正在这样做：

nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #546478;
    padding: 5px 20px;
}

.nav__container {
    max-width: 93.75rem;
    margin: 0 auto;
}

li {
    list-style: none;
    margin: 20px;
}

li:hover {
    border-bottom: 1px solid red;
}

.hero__nav-items {
    margin-left: auto;
}

.hero_nav-list {
    display: flex;
}   

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">    
      </div>
      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

标签： htmlcss

Answer 1

删除填充和边距hero_nav-list并添加填充li

nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #546478;
    padding: 0 20px;
}

.nav__container {
    max-width: 93.75rem;
    margin: 0 auto;
}

li {
    list-style: none;
    margin: 0 20px;
    padding: 20px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.4s;
}

li:hover {
    border-bottom-color: red;
}

.hero__nav-items {
    margin-left: auto;
}

.hero_nav-list {
    display: flex;
    padding: 0;
    margin: 0;
}

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">    
      </div>
      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>
  </div>
</section>