底部边界悬停在正常状态下

Question

嘿，我不明白是否有任何简单的解决方法：我希望黑色边框位于蓝色边框的顶部，而不是延长导航的高度。

我已经看了插图并在A中添加底部，但我想从.navigationbar

覆盖一个

html

<nav class="navigationbar">
  <ul>
    <li>
      <a href="index.html">One</a>
    </li>
    <li>
      <a href="two.html">Two</a>
    </li>
    <li>
      <a href="three.html">Three</a>
    </li>
  </ul>
</nav>

CSS

* {
  margin: 0;
}
.navigationbar {
  background-color: #000000;
  width: 100%;
  border-bottom: .1em solid #0000FF;
}
.navigationbar ul {
  list-style-type: none;
  overflow: hidden;
}
.navigationbar ul li {
  float: left;
  color: #FFFFFF;
}
.navigationbar ul li a {
  height: 100%;
  display: block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}
.navigationbar ul li a:hover {
  background: #0000FF;
  color: #FFFFFF;
  border-bottom: .1em solid #000000;
}
.navigationbar img {
  float: left;
}

https://jsfiddle.net/55r2e9bq/

Answer 1

为什么不设置边框并以后更改颜色？

.navigationbar ul li a 
{
    border-bottom: .1em solid transparent;
}
.navigationbar ul li a:hover
{
    border-bottom-color: #000000;
}

Answer 2

您看到的边框来自您具有border-bottom: .1em solid #000000;的规则.navigationbar ul li a:hover{...}。它没有扩展到导航栏宽度的100％，而是导致它变得更高。如果您要navigationbar保持相同的高度，则应将边框分配给a元素的正常状态，然后您可以将其颜色更改为任何您想要的颜色。

以这种方式：

.navigationbar ul li a {
  height: 100%;
  display: block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
  border-bottom: .1em solid #ffcc00; /* add this property with the same value of the `:hover` state */
}

Answer 3

您可以将border-bottom: 0.1em solid #000000;添加到.navigationbar ul li a，以避免运动/身高增加：

https://jsfiddle.net/p7l7adhe/1/