<!DOCTYPE HTML> <html> <head> <title>animated manu www.elgatocoder.com</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> @charset 'UTF-8'; @import url(http://fonts.googleapis.com/css?family=Indie+Flower); /* cssreset.com */ *{ margin: 0; padding: 0; } /* cssreset.com */ body { background: #191919; /* maybe an option C63D0F } */ header { position: relative; border-bottom: solid 2px #e5e5e5; padding: 7em 0 0 0; text-align: center; } #nav { position: absolute; top: 3em; font-family: 'Indie Flower', cursive; left: 0; width: 100%; } #nav ul li { display: inline-block; padding-right: 2em; } #nav ul li a { display: block; text-decoration: none; text-transform: uppercase; font-weight: 800; color: #5F9EA0; outline: 0; -moz-transition:all 0.7s ease; transition:all 0.7s ease; -webkit-transition:all 0.7s ease; } #nav ul li.active a , #nav ul li:hover a { color:#EEE8AA; -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); -webkit-transform: rotate(360deg); } @media screen and (max-width: 600px){ #nav{ background:#250606; top:0; padding:0; } #nav ul li { float: none; display: block; text-decoration: none; text-transform: uppercase; font-weight: 800; color: #5F9EA0; outline: 0; -moz-transition:none; transition:none; -webkit-transition:none; } #nav ul li a { width: 100%; border-bottom: 1px solid #fff; } #nav > ul > li.active > a , #nav > ul > li:hover > a { color:#EEE8AA; -moz-transform: none; -ms-transform: none; transform: none; -webkit-transform: none; } } </style> </head> <body> <header> <nav id="nav"> <ul> <li class="active" ><a href="index.html">Home</a></li> <li><a href="#" >Blog</a></li> <li><a href="#">Page</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> </body> </html>