下划线导航链接，附加到 div 的底部并限制宽度

Question

我有一个引导导航栏，我想在悬停时为链接加下划线。问题是下划线（使用border-bottom）直接位于li元素下方，我想将其附加到祖父div的底部[下例中的导航]。 此外，我想将此下划线的宽度限制为文本本身的宽度，而不是它下划线的整个元素。

<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. 想要将下划线的宽度限制为文本的确切宽度

Answer 1

你可以使用 padding-bottom:

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