下划线导航链接，附加到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 
}