菜單 - 對齊文本中與底部對齊邊框

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