Edit in JSFiddle

JavaScript
HTML
CSS
Result

 <body>
     <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>

html{
    background-color: #eee;
    
}
body{
    margin: 0 auto;
    margin-top:50px;
    color:#4a4a4a;
    display:block;
    width:90%;
    max-width:960px; 
}
nav{
    font-size:35px;
    padding:20px;
    margin-top:20px;
    font-family:'Arial Rounded MT Bold';
    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 ; 
}