If you want to add a smooth and awesome Drop Down Menu Bar in Blogger then you can easily add in your template this Css3 and html Drop down menu bar.But works as Jquery Drop Down Menu.




Let’s get this to work now.


Demo 


How To add Awesome CSS3 Drop Down Menu To Blogger?

  1. Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML) 
  2. Click (Ctrl + F) Search Give Below Code.

]]></b:skin>
Paste below code Before ]]></b:skin>

/* The CSS Code for the menu starts here blogsfunda.com */
.navblogsfunda,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    height:600px;
}
.navblogsfunda {
    position:relative;
}
.navblogsfunda ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}
.navblogsfunda li {
    float:left;
    position:relative;
    list-style: none;
}
.navblogsfunda li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#7770B4;
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:35px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
}
.navblogsfunda li:hover &gt; a {
    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;
}
.navblogsfunda li:hover ul.subs {
    height:auto;
    width:180px;
}
.navblogsfunda ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    list-style: none;
}
.navblogsfunda li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    list-style: none;
}
.navblogsfunda li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}
.navblogsfunda ul li a {
    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}
.navblogsfunda li:hover ul li a {
    line-height:35px;
}
.navblogsfunda ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}

ADD HTML CODE:

  1. Now go to Blogger Dashboard > Layout
  2. Click on Add a Gadget (below header)
  3. Select HTML/JavaScript
  4. Copy below code and paste inside it.
<ul class="navblogsfunda">
<li><a href="http://www.blogsfunda.com/">Home</a></li>
<li><a href="http://www.blogsfunda.com/">Tutorials</a>
            <ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
            <ul class="subs">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
            <ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Live</a></li>
<li><a href="#">Branches</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>
Replace # with your links.
5.Now save your HTML/Javascript'.
And that's it!

Home Blogger CSS3 Drop Down Menu Bar Blog