导航菜单项下划线效果

Question

我正在尝试让鼠标悬停时导航菜单项具有下划线效果。这是导航菜单的当前style.css代码。

我应该添加什么才能让它看起来像这样？示例：http://www.templatemonster.com/demo/54038.html。

这是我当前的导航条形码。

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