html - Navbar menu items with bars beneath them on hover/click -


i trying make html navbar using bootstrap looks similar twitter's current nav bar, selected tab has line beneath in , line appears beneath menu items when hover on them. have tried looking @ examples of this, have not discovered how this. enter image description here

not sure whether best 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 nav bar

any or guidance appreciated

since question little unclear, i'll assuming haven't tried (based on post), starting point.

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

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


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -