Nav Menu items Underline effect - css

Question

I'm trying to have navigation menu items have underline effect when hovering. This is my current style.css code for the navigation menu.
What should I add to make it look something like this? Example: http://www.templatemonster.com/demo/54038.html .
This is my current nav bar code.
.navbar-nav .open .dropdown-menu{
display:block !important;
}
.navbar-default .navbar-nav > li > a {
color: #333;
border-bottom: 1px solid transparent;
padding: 0;
margin: 14px;

Answer 1

Try this..
HTML:
<ul>
<li>About</li>
</ul>
CSS:
body,html {
margin: 0;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
https://jsfiddle.net/y4hc9Lbv/