当我将鼠标悬停在菜单项上时，我想在底部显示该行？我的代码出了什么问题？

Question

当我将鼠标悬停在菜单项上时，它会显示底部的线条（边框），但问题是它会向下推动ul的边框，我希望当我将鼠标悬停在菜单项上时会显示<在ul线上的strong> border-bottom ，所以它不会把它推下来...我该如何解决这个问题？ （对不起，因为我的英文，如果不可理解的话）

这是我的 HTML ＆amp;的 CSS ：

.menu-section-wrapp {
  width: 100%;
}
.menu-section {
  width: 70%;
  margin: auto;
}
.menu {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  list-style: none;
  border-bottom: 1px solid black;
}
.menu li {
  position: relative;
  padding-right: 2%;
  display: inline-block;
  padding-bottom: 1%;
}
.menu li:hover {
  border-bottom: 2px solid red;
}
a {
  text-align: center;
  padding-bottom: 12%;
  text-decoration: none;
  color: #333;
  font-family: "Roboto";
}

<div class="menu-section-wrapp">
  <div class="menu-section">
    <ul class="menu">
      <li><a href="#" class="menu-link">Home</a>
      </li>
      <li><a href="#" class="menu-link">About us</a>
      </li>
      <li><a href="#" class="menu-link">FAQ</a>
      </li>
      <li><a href="#" class="menu-link">Contact</a>
      </li>
      <li><a href="#" class="menu-link">Hire us</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

最简单的解决方案是在菜单没有悬停时为菜单提供透明的底部边框，以便在添加边框时悬停不会跳转

.menu li {
  position: relative;
  padding-right: 2%;
  display: inline-block;
  padding-bottom: 1%;
  border-bottom: 2px solid transparent;
}

.menu-section-wrapp {
  width: 100%;
}
.menu-section {
  width: 70%;
  margin: auto;
}
.menu {
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
  list-style: none;
  border-bottom: 1px solid black;
}
.menu li {
  position: relative;
  padding-right: 2%;
  display: inline-block;
  padding-bottom: 1%;
  border-bottom: 2px solid transparent;
}
.menu li:hover {
  border-bottom: 2px solid red;
}
a {
  text-align: center;
  padding-bottom: 12%;
  text-decoration: none;
  color: #333;
  font-family: "Roboto";
}

<div class="menu-section-wrapp">
  <div class="menu-section">
    <ul class="menu">
      <li><a href="#" class="menu-link">Home</a>
      </li>
      <li><a href="#" class="menu-link">About us</a>
      </li>
      <li><a href="#" class="menu-link">FAQ</a>
      </li>
      <li><a href="#" class="menu-link">Contact</a>
      </li>
      <li><a href="#" class="menu-link">Hire us</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

这很简单

.menu li:hover {
      margin-bottom:-1px;
      border-bottom: 2px solid red;
}

只需追加

  

边距：-1px;

Answer 3

解决此问题的一种方法是 写

.menu li {
  border-bottom: 2px solid transparent;
}
.menu li:hover {
  border-color: red;
}