How to add stylish drop down menu to blogger

Hi Bloggers! Today I am gonna show you how to add stylish drop down menu to blogger. For demo see my  drop down menu on the top of this blog.To add this stylish menu you should follow only a few steps.This Menu is so stylish.

Step 1 : Go to Blogger Dashboard --> Template ---> Edit Html

Step 2 : Press Ctrl F and look for the code :

]]></b:skin>

Step 3 : Paste the following code before it.

/* Flying Css3 menu www.myhifitechs.blogspot.in*/
.container {
 
    margin: 30px auto;
    width: 957px;}
#nav,#nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;}
#nav {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi47GWbuwbxLIhvjS1omIFEuhqPvR2lQaDAiRAH2c3gyCWSgNsjwi0r1632IT47WCwAogbfzvTsvxsvntQQfASd0lc7ovezRrqJlTTeO3dHmyhLpMPGIErMo1zAeuim5OMnzYm11yE-Dl4/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 957px;}
#nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#nav li {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_gt74DOf1U-2k7f0L1afktAdyMOPAjPtKtj5wNO-kl0Mwu6tbT3PkbBg2Mee-ULIz34MoWLm41XLZlRWq24oNgr1-aXrBuKKpZd9GsMQRYuhV4MyC9dRU0cdhWKLIr1nbFj5M81dUzBA/s1600/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;}
#nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
    color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);}
#nav ul li {
    background: none;
    width: 100%;}
#nav ul li a {
    float: none;}
#nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;}
#lavalamp {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq-V5qBUTwGdtO1Kior2QdniJttcjR39o3RURu_IB5KRQQ0kIhDu1FiDg1Yhm_0CzlQVpyjs6TFfOJYhGeYUtBcKw64NJTokWLA5ehyphenhypheni1euKC_nzrFBuEb7RVQRADESXYFITfcwYkajPo/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
    left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
    left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
    left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
    left: 250px;
}
#nav li:nth-child(5):hover ~ #lavalamp {
    left: 330px;
}
#nav li:nth-child(6):hover ~ #lavalamp {
    left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
    left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
    left: 565px;
}

Step 4 : Save the template

Step 5 : Go to Layout --> Add a Gadget --> HTML/Javascript

Step 6 : Add the following code in it

<div class="container">
            <ul id="nav">
                <li><a href="http://myhifitechs.blogspot.in/">Home</a></li>
                <li><a class="hsubs" href="#">Android</a>
                    <ul class="subs">
                        <li><a href="#">Phones</a></li>
                        <li><a href="#">Apps</a></li>
                        <li><a href="#">Help</a></li>
                     
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Games</a>
                    <ul class="subs">
                        <li><a href="#">PC Games</a></li>
                        <li><a href="#">Play Station Games</a></li>
                        <li><a href="#">X Box 360 Games</a></li>
                        <li><a href="#">Action Games</a></li>
                        <li><a href="#">Open World Adventure Games</a></li>
                        <li><a href="#">Android Games</a></li>
                        <li><a href="#">Shooter Games</a></li>
                     
                    </ul>
                </li>
                <li><a class="hsubs" href="#">Blogging</a>
                    <ul class="subs">
                        <li><a href="#">Blogger Tricks</a></li>
                        <li><a href="#">Blogger Templates</a></li>
                        <li><a href="#">Blogger Widgets</a></li>
                     
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Write For Us</a></li>
             
                <div id="lavalamp"></div>
            </ul>
        </div>

That's it! You are Done !!!  

Thank You for Reading!!!!!!!!!!!!!