<nav id='rolling-nav'> <ul> <li><a href='URL' data-clone='Home'>Home</a></li> <li><a href='URL' data-clone='Sobre'>Sobre</a></li> <li><a href='URL' data-clone='Portfolio'>Portfolio</a></li> <li><a href='URL' data-clone='Comentários'>Comentários</a></li> <li><a href='URL' data-clone='Contato'>Contato</a></li> </ul> </nav>
body { background-color:#111; margin:0px 0px; padding:50px; } #rolling-nav { font:normal 12px 'Trebuchet MS',Arial,Sans-Serif; color:white; text-transform:uppercase; } #rolling-nav ul { height:50px; margin:0px 0px; padding:0px 0px; overflow:hidden; } #rolling-nav li { float:left; display:inline; list-style:none; margin:0px 0px; padding:0px 0px; } #rolling-nav a, #rolling-nav a:before { display:block; margin:0px 0px; padding:0px 30px; line-height:50px; color:white; text-decoration:none; background-color:#900; background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%); background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%); background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%); background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%); background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%); -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1); -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1); box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1); position:relative; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #rolling-nav a:before { content:attr(data-clone); position:absolute; top:100%; left:0px; display:block; background-color:white; background-image:-webkit-linear-gradient(top, #ddd, white); background-image:-moz-linear-gradient(top, #ddd, white); background-image:-ms-linear-gradient(top, #ddd, white); background-image:-o-linear-gradient(top, #ddd, white); background-image:linear-gradient(top, #ddd, white); border-top:2px solid rgba(0,0,0,0.2); color:#333; } #rolling-nav a:hover { margin-top:-50px; margin-bottom:1px; }