Menu Pelangi

Selamat Malam sob, malem ini fahmi mau memberikan tutorial Nav Menu yang sangat sederhana ini hasil experiment, heheheee... sengaja ga di kasih Screen shoot sob, tapi ada kok demo nya :D
Tapi demo nya nanti belakangan :p .
Ok langsung saja.



CSS :

body{margin:40px;}


nav{
font-family:arial;
font-size:15px;
color:#000;
}


nav a{
width:80px;
position: relative;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #444;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}


nav a:hover{
background: #eee;
}


nav ul{
display:block;
}


nav li{
list-style:none;
padding:0;
display:inline;
margin-right:20px;
}


ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}


ol ol{
margin: 0 0 0 2em;
}


nav a:hover:before{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow:0 0 10px #000;
}


nav a:before{
color:#fff;
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #FA0132;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}


.yellow a:before{
background:#FAD801;
}


.green a:before{
background:#4BFA01;
}


.blue a:before{
background:#01A2FA;
}


.purple a:before{
background:#FA01DD;
}


.yell-green a:before{
background:#A2FA01;
}​

HTML :

<nav>

<ul>

<ol>

<li><a href='#'>Homepage</a></li>

<li class='yellow'><a href='#'>About</a></li>

<li class='green'><a href='#'>Blog</a></li>

<li class='blue'><a href='#'>Contact</a></li>

<li class='purple'><a href='#'>Article</a></li>

<li class='yell-green'><a href='#'>Follow me</a></li>

</ul>

</ol>

</nav>

Demo​