Creating A Navigation Menu with Text Rollover Effects

Preview:

Description:

A nice looking horizontal navigation bar that comes with menu text rollover effect when mouse hover, built  with Html5,  CSS and CSS3 transforms & transitions.

How to use it:

Create the Html for a navigation bar. Use the Html5 data-text attribute for the rolling text.

<ul>
  <li><a data-text="CSS" href="#">CSS</a></li>
  <li><a data-text="HTML" href="#">HTML</a></li>
  <li><a data-text="Javascript" href="#">JavaScript</a></li>
  <li><a data-text="About" href="#">About</a></li>
</ul>

The CSS/CSS3 rules .

ul {
 background-color: rgba(0,0,0,0.4);
 border-bottom: 1px solid rgba(255,255,255,0.25);
 box-shadow: 0 0 8px rgba(0,0,0,0.4) inset;
 border-radius: 16px;
 margin: 0;
 padding: 0 30px;
}
ul {
 display: inline-block;
 text-align: center;
 height: 50px;
 overflow: hidden;
}
ul li a {
 letter-spacing: -1px;
 text-decoration: none;
 text-transform: uppercase;
 color: #FFF;
}
ul li {
 float: left;
 height: 100%;
 list-style: none;
 margin: 0 30px;
}
ul li * {
 display: inline-block;
 font-size: 1.3em;
 line-height: 50px;
}
ul li a {
 margin-top: -50px;
 transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
ul li a:hover {
 margin-top: 0;
}
ul li a:before {
 content: attr(data-text);
 display: block;
 color: #CDF745;
}
 color:#CDF745;
}