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.
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
Post a Comment