Navbar menu items with bars beneath them on hover/click

Question

I am trying to make a html navbar using bootstrap so it looks similar to twitter's current nav bar, where the currently selected tab has a line beneath in and a line appears beneath menu items when you hover over them. I have tried looking at examples of this, but have not discovered how to do this.

Not sure whether it is best to use nav pills

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

Or a nav bar

Any help or guidance appreciated

Answer 1

Since the question is a little unclear, I'll be assuming you haven't tried anything (based on your post), this is some starting point.

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 */
}

For future reference, consider showing code you've tried.