Html 菜单-将文本中间与底部对齐的边框对齐

这是我当前的代码：

任何人能告诉我如何能在导航栏中间垂直对齐文本，然后在悬停或活动菜单项底部的Navbar底部有一个3px蓝色条。 例如：

我的代码（没有中心对齐，并且悬停时的蓝色条太高）：

---

基于您的JSFIDLE，我能够使用以下方法使其工作：

#nav li { height: 70px; }
#nav li a {
    height: 67px;
    line-height: 67px;
    border-bottom: 3px solid #fff;
    display: inline-block;
}
#nav li a:hover { border-color: blue; }

为#导航使用以下样式

工作演示

并可能添加

#nav li a{border bottom:3px solid transparent}

以防止导航抖动

#nav li { height: 70px; }
#nav li a {
    height: 67px;
    line-height: 67px;
    border-bottom: 3px solid #fff;
    display: inline-block;
}
#nav li a:hover { border-color: blue; }

#nav a:hover {
border-bottom: 3px solid blue;
padding-bottom: 23px;
}