html - 导航栏元素悬停的问题

Question

当我将鼠标悬停在各个链接上时，改变颜色的部分并没有完全向上。我觉得有比我现在正在做的更好/更有效的方法来做到这一点。如果有人可以提供帮助，那就太好了!

HTML:

<ul class="nav nav-blue">
    <li><a href="" class="nav-hdr">Nigel Silva</a></li>
    <li><a href="" class="el-b-1">Home</a></li>
    <li><a href="" class="el-b-2">About</a></li>
    <li><a href="" class="el-b-3">Work</a></li>
    <li><a href="" class="el-b-4">Clients</a></li>
    <li><a href="" class="el-b-5">Contact</a></li>
</ul>

CSS:

.nav-hdr {
  color: #FFF;
  font-size: 1.5em;
  position: relative;
  left: -27%;
  top: 5%;
}
.nav{
  list-style:none;
  margin:0 auto;
  padding:0;
  text-align:right;
  text-decoration: none;
  height: 55px;
}
.nav li{
  display:inline;
}
.nav a{
  display:inline-block;
  padding-right:15px;
  color: #000;
  margin-top: auto;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.nav a:hover, .nav a:focus {
  color: #FFF;  
}
.nav-blue {
  background-color: #00aeef;
  margin: auto;
  width: 50%;
}
.nav-blue a {
  color: #FFF;
}
.el-b-1:hover, .el-b-1:focus, .el-b-2:hover, .el-b-2:focus, .el-b-3:hover, .el-b-3:focus,
.el-b-4:hover, .el-b-4:focus, .el-b-5:hover, .el-b-5:focus {
  background-color: #47cdff;
  margin-top: 8.5px;
  margin-bottom: 8.5px;
}
.el-b-1:active, .el-b-2:active, .el-b-3:active, .el-b-4:active, .el-b-5:active {
  background-color: #0b8aba;
}

Answer 1

将 vertical-align: top; 添加到 .nav a 并删除 margin-top: 8.5px;