css - 导航菜单项下划线效果

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; 

Answer 1

试试这个..

HTML:

<ul>
  <li><a href="#">About</a></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/