How To Add Css3 Drop Down Menu For Blogger

Adding menu bar to blogger is helps your
visitors to navigate your site easily.you can
increase blogger beauty and neat. You can
link with main Categories, pages, and important
posts,with  menu bar.Hence, I added lot of
menu bars, Check it here you ca do with easy
steps. Follow these steps to add it your blog.

DEMO

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

.menu {
    border: none;
    border: 0px;
    margin: 0px;
    padding: 0px;
    font-family: verdana,geneva,arial,helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: 8e8e8e;}
.menu ul {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSB1stnxTRq5EuL62kFGVbMKv8GV4mtVL2sCMJiTUc7OF68_h7kDy6HH_Zu64Lj6VZ_OYVErku4q8omJ28y5QDn8Y8vIIbkuQ1Dk9orFTUOWmUtomIm_o0tvutx1SkhlCul9wC7COqCso/s1600/menu-bg.gif) top left repeat-x;
    height: 43px;
    list-style: none;
    margin: 0;
    padding: 0;
margin-top:-20px;}
.menu li {
    float: left;
    padding: 0px 8px 0px 8px;} 
.menu li a {
    color: #666666;
    display: block;
    font-weight: bold;
    line-height: 43px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;}
.menu li a:hover {
    color: #000000;
    text-decoration: none;}
.menu li ul {
    background: #e0e0e0;
    border-left: 2px solid #a80329;
    border-right: 2px solid #a80329;
    border-bottom: 2px solid #a80329;
    display: none;
    height: auto;
    filter: alpha(opacity=95);
    opacity: 0.95;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
    display: block;}
.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;}
.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 10px 0px 15px;
    text-align: left;}
.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.menu p {
    clear: left;
}
.menu #current {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yQb_63OXYyCCZ2eKEVZSoXslWuTbzhKiNHW1XfX6e_QjbBodCzUVtyyroQ2xaht5bshEXL2DuRwR4vmBsuc7zYpwz0_bQ2Br1RfmjGINsZ1uILIcp6YTqDHqMirQA4P-S9eTEW_8Y1g/s1600/current-bg.gif) top left repeat-x;
    color: #ffffff;
}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Test Link 1</a></li>
<li><a href="#">Test Link 2</a></li>
<li><a href="#">Test Link 3</a></li>
<li><a href="#">Test Link 4</a></li>
</ul>
</li>
<li><a href="#">Help</a>
<ul>
<li><a href="#">Test Link 1</a></li>
<li><a href="#">Test Link 2</a></li>
<li><a href="#">Test Link 3</a></li>
<li><a href="#">Test Link 4</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="http://www.bloggertrix.com.com/">Add This</a></li>
</ul>
</div>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.