css - 悬停时底部边框覆盖正常

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;
}