下劃線導航鏈接，附加到div的底部和限制寬度

Question

我有一個引導的導航欄，我想強調懸停的鏈接。問題在於下劃線（使用border-bottom）直接位於li元素下方，我想將它附加到祖父母div的底部[下面的示例中的nav。]。 此外，我想限制下劃線的寬度爲文本本身的寬度，而不是整個元素的下劃線寬度。

<nav> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand header-title" href="#/home">Title!</a> 
     </div> 
     <div class="header-links"> 
      <ul class="nav navbar-nav my-nav" role="menu"> 
       <li><a href="#/link1">Link 1</a> 
       </li> 
       <li><a href="#/link2">Link 2</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

.my-nav > li:hover { 
    border-bottom: 0.2em solid white; 
} 

見的jsfiddle全例如，http://jsfiddle.net/8kzpjeyv/1/embedded/result/（請確保您的視口是足以使菜單未摺疊寬）

1. 想讓下劃線在很藍色條的底部，因此它看起來像是白​​色身體的一部分
2. 想要將下劃線的寬度限制爲tex的確切寬度牛逼

Answer 1

您可使用填充底：

.my-nav > li:hover { 
    padding-bottom: .2em; 
    border-bottom: 0.2em solid white; 
} 

demo

Answer 2

http://jsfiddle.net/8kzpjeyv/3/

.my-nav a{ 
     padding-left:0!important; 
     padding-right:0!important 
}