Drop Menu Bar for blogger easy

This tutorial will explain how to add cool

drop down menubar for your blogger.Actually

menubar is main thing of the blog.Because

you can add main pages link with it, like

contact us page,Privacy policy,Site-map, etc.

So, you have to choose right menubar to your

blog.Now i posted more quality menubars,

you can add it as your like. Click below link to

get all menubar tutorials.

Attractive menubar collection.

1.  Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<script src='http://bloggertrix.googlecode.com/files/menu1.js' type='text/javascript'></script>
<style>
#menu *{
margin:0px; padding:0px; list-style-type:none; text-decoration:none}
div#menu{position:relative}
#menu ul.menu{ white-space:nowrap}#menu ul.menu li{ display:inline-block; height:57px; position:relative}#menu ul.menu li div{ position:absolute; top:55px; left:0px}#menu ul.menu li div div{ position:absolute; top:-6px; left:176px}#menu ul.menu li div ul li{ display:block; float:none; width:auto; height:auto}#menu ul.menu li a{  padding-left:15px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5qcAnAg045zICKzCz8eVuI3eP0YTgMXezF_XoamNYa1Aw3i_dcyHP_x6VbIT3HgiMQSmt7fvQizasWJxoW8wlxBBJcqHkG9xS41QWxTE8adVtgwNCrCch-I4svoURF4mg4spna5j_4-h/s1600/menu_level1_item.png");  background-repeat:no-repeat;  background-position:left -1000px;  display:inline-block;  margin:6px 2px}#menu ul.menu li a span{  padding-right:15px;  padding-left:0px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu5qcAnAg045zICKzCz8eVuI3eP0YTgMXezF_XoamNYa1Aw3i_dcyHP_x6VbIT3HgiMQSmt7fvQizasWJxoW8wlxBBJcqHkG9xS41QWxTE8adVtgwNCrCch-I4svoURF4mg4spna5j_4-h/s1600/menu_level1_item.png"); background-repeat:no-repeat; background-position:right -1000px; display:inline-block; height:40px; line-height:40px; cursor:pointer}#menu ul.menu li:hover a{ background-position:left -90px}#menu ul.menu li:hover a span{ background-position:right -135px}#menu ul.menu li.active a{ background-position:left 0px}#menu ul.menu li.active a span{ background-position:right -45px}#menu ul.menu li div ul li a{ display:block; padding:0px; margin:0px; background:none}#menu ul.menu li div ul li a span{ display:block; padding:0px; background:none; height:auto; line-height:25px; padding:10px 0 10px 12px; white-space:normal}#menu ul.menu li div{  width:194px;  padding-top:6px;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXG9iOtyfGBy9livnT4kMy8DbSIpM9fPPGvYsx-TcFxJpIT2yqUWIKFNRKnzTqiG4PMSspZAD9OQN_o1wQZsDsYyefHmG9Wi26YeHIKT1OQmhR0IMQSTw9vy49dhgbYx0mgl_O9kFffK0_/s1600/submenu-top.png");  background-repeat:no-repeat;  background-position:0px top}#menu ul.menu li div ul{  padding:9px;  padding-top:0;  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8btnRyE-pVykXGB9MW139-XNncr4pL74aHV-KfCMEso650Jv5BGx28DXmYYnRfuX2yDyG1i1-ltduQ-AM7uA4I9BWBk8LhtW1dPBmxY2YUVzbnyyz3VhYrC60016Nnck7DsxMqTOCoKqL/s1600/submenu-bottom.png"); background-repeat:no-repeat; background-position:0px bottom}#menu ul.menu ul li:hover{  background-repeat:repeat-x;  background-position:0% 100%;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1O5XADTTOS_56-cnki-cngJCVEk2ftrbe6BSm3HsuYAYjDUQGZxVypWh7DIDW3UJRBEAivyz9JPIzVf6uKCrEplNGclWcTZ-6UpuzGNr7f375T37ZJ7ucsuWC9urzzXuSsl_oiAQE8zgB/s1600/menu_level2_item_hover.png)}#menu ul.menu ul li:hover>a{  background-repeat:repeat-x;  background-position:0% 0%;  background-color:transparent;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1O5XADTTOS_56-cnki-cngJCVEk2ftrbe6BSm3HsuYAYjDUQGZxVypWh7DIDW3UJRBEAivyz9JPIzVf6uKCrEplNGclWcTZ-6UpuzGNr7f375T37ZJ7ucsuWC9urzzXuSsl_oiAQE8zgB/s1600/menu_level2_item_hover.png)}
#menu{  height:57px;  padding-left:14px;  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0vjPoTiZTFVu-0Yc4BeCDUQHI3eS-OOj_04z_9fe34iJfFbj7_-_ZMGZ3-2dP3bs0Xg7dD0Up_16W5Pf7ODzy9ieYL2pVYObj3387G-CBepdCMNII1sQrvBkosLKOJA_CF7NPTq7bav1A/s1600/page_header_b.png) repeat-x;
-webkit-border-radius: 20px;-khtml-border-radius: 10px; -moz-border-radius: 20px;border-radius: 10px;}
#menu span{ color:#edf0f1; text-shadow:0 -1px 1px #000}#menu li:hover>a>span { color:#fff; text-shadow:0 1px 1px #000,0 2px 10px #969696}#menu ul.menu li a span{ font-family:Arial; font-size:18px; font-weight:400}#menu ul.menu li div ul li a span{ font-family:Arial; font-size:15px; font-weight:400}#menu ul.menu li div ul{ padding-bottom:8px}#menu ul.menu li div ul li:first-child{ border-top-width:0px}#menu li>div{visibility:hidden}#menu li:hover>div{visibility:visible}/* */#menu ul.menu ul li:hover{ background-color:#393c45}#menu ul.menu li div ul li{ border-bottom:1px solid #70757b; border-top:1px solid #31363b}/* ie7 */#menu ul.menu li{ *zoom:1; *display:inline}#menu ul.menu li a{ *zoom:1; *display:inline}#menu ul.menu li a span{ *zoom:1; *display:inline}#menu ul.menu li div ul li a{ *display:inline}#menu ul.menu ul li:hover{ *background-image:none}#menu ul.menu ul li:hover>a{ *background-image:none}/* IE6 */#menu ul.menu li a{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJf6PdEXLk_m1CNcuWX0rRuNMBRguzw8BC9G76L6sCMCb4hqgTvbZoqKQ0mJlgkpjcQ_FICVxcoFrdKJ-NzhRp8McY_1M0BjkeiaN_W275-yB6ovGv_a03SlbnNj9xOJjHV2v4Qy4lG_A/s1600/menu_level1_item.gif")}#menu ul.menu li a span{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJf6PdEXLk_m1CNcuWX0rRuNMBRguzw8BC9G76L6sCMCb4hqgTvbZoqKQ0mJlgkpjcQ_FICVxcoFrdKJ-NzhRp8McY_1M0BjkeiaN_W275-yB6ovGv_a03SlbnNj9xOJjHV2v4Qy4lG_A/s1600/menu_level1_item.gif")}#menu ul.menu li div{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKY1Z3s1cZFXZRhNfeX18m3W0QC2JKvcU3vp9vlqk5bFYRkH1_Xcp2lsztlAqTjn8BZ5gTCoKdZ3SsBiSFWFtNIz81ReVE4Bd8QocIGXdiSW6U8p-z03IY4SYFMLfywSZHidnTNjZSRWy9/s1600/submenu-top.gif");z-index:10}#menu ul.menu li div ul{  _background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgye03iBbWqQb_EoEulHhtroQOCVc9S_86JUGdSImZWUniv7rxnQT7KQuob1msuCWe3VEJbIMY4wBupu23QMVbeOl2qAhWPGdoLGgVMGWIFmjKLPQNZttYA77DyDFeJvIqsCELfiQMsH0fy/s1600/submenu-bottom.gif")}#menu ul.menu li a:hover{ _background-position:left -90px}#menu ul.menu li a:hover span{ _background-position:right -135px}#menu div{_display:none}#menu div li:hover div{_display:block}#menu div li:hover li:hover div{_display:block}#menu div li:hover li:hover li:hover div{_display:block}/* */
</style>

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>LINK 1</span></a>
        </li>
        <li><a href="#" class="parent"><span>LINK 2</span></a>
            <div><ul>
            <li><a href="#" class="parent"><span>ITEM 1</span></a>
                    <div><ul>
                      <li><a href="#"><span>ITEM 1.1</span></a>
                       <div><ul>
                        <li><a href="#"><span>ITEM 1.1.1</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.2</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.1.4</span></a></li>
                       </ul></div>
                       </li>
 <li><a href="#"><span>ITEM 1.2</span></a></li>                                        <li><a href="#"><span>ITEM 1.3</span></a></li>
                        <li><a href="#"><span>ITEM 1.4</span></a></li>
                        <li><a href="#"><span>ITEM 1.5</span></a></li>
                        <li><a href="#"><span>ITEM 1.6</span></a></li>
                                        <li><a href="#"><span>ITEM 1.7</span></a></li>
                        <li><a href="#"><span>ITEM 1.8</span></a></li>
                        <li><a href="#"><span>ITEM 1.9</span></a></li>
                   </ul></div>
                </li>
                <li><a href="#" class="parent"><span>ITEM 2</span></a>
                </li>
 <li><a href="#" class="parent"><span>ITEM 3</span></a>
                </li>
 <li><a href="#" class="parent"><span>ITEM 4</span></a>
                </li>
             </ul></div>
        </li>           
    <li><a href="#" class="parent"><span>LINK 3</span></a></li>
<li><a href="#" class="parent"><span>LINK 4</span></a></li>
    <li><a href="#"><span>LINK 5</span>
        <li class="last"><a href="#"><span>LINK 6</span></a></li>

<li class="last"><a href="#"><span>LINK 7</span></a></li></a></li>

<li class="last"><a href="http://www.bloggertrix.com/"><span>Addthis</span></a></li>
</ul>
</div>

4. Save HTML/Javascript. you are done.

Get paid to share your links!