Coding Subtle Navigation Bar With CSS3

Throwing in some of the fancy new CSS 3 selectors could transform the plain old unordered list into a real web menu . Jump the jump for the code ( psst. It does look awesome )

Starting with the Html markup :

     <nav>
     <ul>
     <li><a href="#">HOME</a></li>
     <li><a href="#">BLOG</a></li>
     <li><a href="#">PRODUCTS</a></li>
     <li><a href="#">CONTACT</a></li>
     <li><a href="#">UPCOMING</a></li>
     </ul>
     </nav>

Now heading on to the CSS.

    nav{
       padding:20px;
       margin-top:20px;
       font-family:'HelveticaNeue';
       float:right;
    }
    nav ul{
    }
    nav li{
       display:inline-block;
    }
    nav a{
       float:left;
       color:#fff;
       text-decoration: none;
       text-shadow: 0px 1px 0px #908c8c;
       padding:5px 10px;
       transition: all 0.2s ease-in-out;
    }
    nav a:hover , nav a:focus{
       color:#fff;
       opacity: 0.75 ;
       text-shadow:0 1px 0 #ff3737,0 2px 0 #fc2dd4,0 3px 0 #9b37ff,0 4px 0 #37c9ff,0 5px 0 #1ab78f,0 5px 0 #1eeb47,0 6px 0       #9ce812, 0 6px 1px #6d6d6d ; 
    }

Notice the text-shadow property , this is where all the magic happens . What we are implementing here are solid multiple layers of text using the text-shadow property to give it a three dimensional effect .
I have written the text-shadow property all together , for making it short and sweet , but it can also be written in this way .
The text-shadow mainly three parts  , the x-y-z coordinates , and then the color of the shadow.

      text-shadow:0 1px 0 #ff3737 ;
      text-shadow:0 2px 0 #fc2dd4 ;
      text-shadow:0 3px 0 #9b37ff ;
      text-shadow:0 4px 0 #37c9ff ;
      text-shadow:0 5px 0 #1ab78f ;
      text-shadow:0 5px 0 #1eeb47 ;
      text-shadow:0 6px 0 #9ce812 ;
      text-shadow:0 6px 1px #6d6d6d ;

The final result would sum up to this , although it would be much better if you'd use HelveticaNeue instead of Arial Rounded .