CSS3 gradient dropdown Navigation menu with Flying Effects

CSS3 is very effective for coding that make any widget fast loading. So I have designed this menu with complete CSS3 coding with gradient color black and dark blue.  And you will find also drop down menu with flying effect. That means when you just mouse over on dropdown menu then its submenu will come by flying from right. This menu is very professional and fancy looks which will best fit for your templates. Visitors will easily like this menu. And I have told before that this widget code is based on complete CSS3 so you don't have to worry about loading time.  

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place gadget below header. that's it.

<style>
#BloggerSpicemenufly,#BloggerSpicemenufly ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#BloggerSpicemenufly {
    font-family: "Trebuchet MS  Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #04BDFA;
    -webkit-box-shadow: 0px 3px 3px #04BDFA;
    box-shadow: 0 3px 4px #004065;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #005C91), color-stop(0.51, #005C91), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #04BDFA 0%, #04BDFA 50%, #04BDFA 51%, #838383 100%);
    background-color:#04BDFA;
}
#BloggerSpicemenufly ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#BloggerSpicemenufly li {
    border-bottom: 1px solid #005C91;
    border-left: 1px solid #005C91;
    border-right: 1px solid #005C91;
    border-top: 1px solid #005C91;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#BloggerSpicemenufly li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#BloggerSpicemenufly li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #04BDFA), color-stop(0.5, #5E5E5E), color-stop(0.51, #111111), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
 /* widget by www.bloggerspice.com #BloggerSpiceAnim */
@-webkit-keyframes BloggerSpiceAnim {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes BloggerSpiceAnim {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#BloggerSpicemenufly li > a:hover {
     -moz-animation-name: BloggerSpiceAnim;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: BloggerSpiceAnim;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#BloggerSpicemenufly li:hover > a {
    z-index: 4;
}
#BloggerSpicemenufly li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#BloggerSpicemenufly ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
 /* keyframes #bsfly */
@-webkit-keyframes bsfly {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes bsfly {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#BloggerSpicemenufly li:hover ul li {
    /* css3 animation */
    -moz-animation-name: bsfly;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: bsfly;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
     /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays by www.bloggerspice.com */
#BloggerSpicemenufly li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#BloggerSpicemenufly li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#BloggerSpicemenufly li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}
</style>
<ul id="BloggerSpicemenufly">
    <li><a href="http://www.bloggerspice.com/">Home</a></li>    <li><a class="flybsmenu" href="#">Tips</a>        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>            <li><a href="#">Submenu 2</a></li>            <li><a href="#">Submenu 3</a></li>            <li><a href="#">Submenu 4</a></li>            <li><a href="#">Submenu 5</a></li>        </ul>
    </li>
    <li><a class="flybsmenu" href="http://namkna.blogspot.com/">Tricks</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>            <li><a href="#">Submenu 2-2</a></li>            <li><a href="#">Submenu 2-3</a></li>            <li><a href="#">Submenu 2-4</a></li>            <li><a href="#">Submenu 2-5</a></li>            <li><a href="#">Submenu 2-6</a></li>            <li><a href="#">Submenu 2-7</a></li>            <li><a href="#">Submenu 2-8</a></li>        </ul>
    </li>
    <li><a class="flybsmenu" href="#">Tools</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>            <li><a href="#">Submenu 3-2</a></li>            <li><a href="#">Submenu 3-3</a></li>            <li><a href="#">Submenu 3-4</a></li>            <li><a href="#">Submenu 3-5</a></li>        </ul>
    </li>
    <li><a href="#">Widget</a></li>    <li><a href="#">SEO</a></li>    <li><a href="#">AdSense</a></li>    <li><a href="#">Contact Us</a></li></ul>

Customization 

• Change width: 980px; to increase or decrease wide of the menu.
• Change all orange # with your Category links 
• Change all Submenu 1 with your blog's Category name