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

【问题标题】：When I hover over the menu item, i want to display the line at bottom? What is wrong with my code?当我将鼠标悬停在菜单项上时，我想在底部显示该行吗？我的代码有什么问题？
【发布时间】：2016-06-22 03:54:04
【问题描述】：

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

这是我的 HTML 和 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>

【问题讨论】：

标签： html css hover

【解决方案1】：

解决这个问题的一种方法是写

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

【讨论】：

【解决方案2】：

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

.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>

【讨论】：

【解决方案3】：

这很简单

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

只是追加

margin-bottom:-1px;

【讨论】：