Navigation menus play a crucial role in web design and a good navigation menu is definitely a plus to the design. Lately I was playing around with CSS3 for a navigation menu and I learnt how to create an animated navigation menu by only using CSS3(No Images, No JavaScript). Using CSS3 in place of jQuery/JavaScript for animations has obvious advantages like faster load time, lesser heavier website, etc. In this article I am sharing the code of a navigation menu made using CSS3. It renders perfectly on Chrome, Firefox, Safari and Opera. And without the easing effects on Internet Explorer and non CSS3 compatible browsers.
Live Demo // Download

The CSS

body {
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    background: #545454;
    margin: 0;
    background: -webkit-gradient(linear, left top, right bottom, from(#545454), color-stop(.5, #7e7e7e), to(#545454)) fixed;
    background: -webkit-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    background: -moz-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    background: -o-linear-gradient(45deg, #545454, #7e7e7e .5, #545454);
    border-top: 7px solid #52a8e8;
    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
    letter-spacing: 2px;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: #fff;
}
header {
    width: 850px;
    margin-left: auto;
    margin-right: auto;
}
header nav a {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 30px;
    margin-right: 20px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    background: #52a8e8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce));
    background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%);
    background: -o-linear-gradient(#52a8e8, #4984ce);
}
header nav a:hover {
    padding-top: 53px;
    padding-bottom: 60px;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}

The HTML

<header> <nav> [HOME][1] [ABOUT][1] [WORK][1] [CONTACT][1] [BLOG][1] </nav> </header>