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

Question

这是我当前的代码：http://jsfiddle.net/spadez/gMm2P/5/

谁能告诉我如何让文本在导航栏中间垂直对齐，然后在悬停或激活时菜单项底部的导航栏底部有一个 3px 的蓝色栏。

例如：http://dribbble.com/shots/1412015-Restaurant-admin/attachments/206070

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

#header {background-color: white; padding: 0 100 0 100; height: 70px;}
#nav {padding-left: 80px;}
#nav a:hover {border-bottom: 3px solid blue;}
#nav a:active {border-bottom: 3px solid blue;}

Answer 1

#nav 使用以下样式

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

工作演示Here

Answer 2

根据您的 jsfiddle，我能够使用：

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