在悬停/单击时，栏下方有栏的导航栏菜单项

Question

我正在尝试使用bootstrap创建一个html导航栏，因此它看起来类似于twitter的当前导航栏，其中当前选中的选项卡下面有一行，当您将鼠标悬停在菜单项上时，会出现一行。我试过看过这个例子，但还没有发现如何做到这一点。

不确定是否最好使用导航丸

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

或导航栏

任何帮助或指导赞赏

Answer 1

由于这个问题有点不清楚，我会假设你没有尝试任何东西（基于你的帖子），这是一个起点。

nav a {
    background-color: white;
    border-bottom: 5px solid blue; /* define a light blue border for the link */
}
nav a.active {
    border-bottom: 5px solid white; /* simulate increase in white color */
}
nav a:hover {
    border-bottom-color: green; /* change border-color to green on hover */
}
nav li {
    border-bottom: 2px solid blue; /* constant light blue border */
}

为了将来参考，请考虑显示您尝试过的代码。