stylish best dropdown menu for blogger

Drop Down Menu Bar for Bloggers

Menubar is the good site navigation tool for any visitor of your site,good and attractive menu bar always impressive for your site.Many of the bloggers faced drop down menu is not visible and facing problem overflow. This dropdown menu works in all browsers.I m given CODE FOR DROPDOWN MENU first copy the whole code from here.




and now the simple steps to follow

1)go to blogger
2)open layout
3)click on add gadget (where you want to place your menubar)
4)go to html/javascript option on scrolling down.
5)now paste this upper code.
6)Finish.



<script src="http://code.helperblogger.com/dd-level-menu.js" type="text/javascript"> </script> <style> .ddsubmenustyle, .ddsubmenustyle div { /*topmost and sub DIVs, respectively*/ font: normal 13px Verdana; margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; background: white; border: 1px solid black; border-bottom-width: 0; visibility: hidden; z-index: 100; } .ddsubmenustyle ul { margin: 0; padding: 0; position: absolute; left: 0; top: 0; list-style-type: none; border: 0px none; } .ddsubmenustyle li a { display: block; width: 170px; /*width of menu (not including side paddings)*/ color: black; background-color: lightyellow; text-decoration: none; padding: 4px 5px; border-bottom: 1px solid black; } * html .ddsubmenustyle li { /*IE6 CSS hack*/ display: inline-block; width: 170px; /*width of menu (include side paddings of LI A*/ } .ddsubmenustyle li a:hover { background-color: black; color: white; } .downarrowpointer { /*CSS for "down" arrow image added to top menu items*/ padding-left: 4px; border: 0; } .rightarrowpointer { /*CSS for "right" arrow image added to drop down menu items*/ position: absolute; padding-top: 3px; left: 100px; border: 0; } .ddiframeshim { position: absolute; z-index: 500; background: transparent; border-width: 0; width: 0; height: 0; display: block; } /* ######### Black Strip Main Menu Bar CSS ######### */ .mattblackmenu ul { margin: 0; padding: 0; font: bold 12px Verdana; list-style-type: none; border-bottom: 1px solid gray; background:orange; overflow: hidden; width: 100%; } .mattblackmenu li { display: inline; margin: 0; } .mattblackmenu li a { float: left; display: block; text-decoration: none; margin: 0; padding: 6px 8px; /*padding inside each tab*/ /*right divider between tabs*/ color:black; background:orange; } .mattblackmenu li a:visited { color:black; } .mattblackmenu li a:hover { background: green; /*background of tabs for hover state */ } .mattblackmenu a.selected { background:red; /*background of tab with "selected" class assigned to its LI */ } </style> <br /><div class="mattblackmenu" id="ddtopmenubar"><ul><li> <a href="#" rel="ddsubmenu0">1</a> </li><li> <a href="#" rel="ddsubmenu1">2</a> </li><li> <a href="#" rel="ddsubmenu2">3</a> </li><li> <a href="#" rel="ddsubmenu3">4</a> </li><li> <a href="#" rel="ddsubmenu4">5</a> </li><li> <a href="#" rel="ddsubmenu5">6</a> </li></ul></div><script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") </script> <br /><ul class="ddsubmenustyle" id="ddsubmenu0"><li> <a href="#">1.1</a> </li><li> <a href="#">1.2</a> <ul><li> <a href="#">1.2.1</a> </li><li> <a href="#">1.2.2</a> </li></ul></li><li> <a href="#">1.3</a> </li><li> <a href="#">1.4</a> </li></ul><ul class="ddsubmenustyle" id="ddsubmenu5"><li> <a href="#">6.1</a> <ul><li> <a href="#">6.2</a> </li></ul></li></ul><ul class="ddsubmenustyle" id="ddsubmenu2"><li> <a href="#">3.1</a> </li><li> <a href="#">3.2</a> </li><li> <a href="#">3.3</a> <ul><li> <a href="#">3.3.1</a> </li><li> <a href="#">3.3.2</a> </li><li> <a href="#">3.3.3</a> </li><li> <a href="#">3.3.4</a> </li></ul></li><li> <a href="#">3.4</a> </li></ul><ul class="ddsubmenustyle" id="ddsubmenu1"><li> <a href="#">2.1</a> </li><li> <a href="#">2.2</a> </li><li> <a href="#">2.3</a> <ul><li> <a href="#">2.3.1</a> </li></ul></li><li> <a href="#">2.4</a> </li></ul><ul class="ddsubmenustyle" id="ddsubmenu3"><li> <a href="#">4.1</a> </li><li> <a href="#">4.2</a> </li><li> <a href="#">4.3</a> </li><li> <a href="#">4.4</a> </li><li> <a href="#">4.5</a> </li></ul><ul class="ddsubmenustyle" id="ddsubmenu4"><li> <a href="#">5.1</a> </li><li> <a href="#">5.2</a> </li><li> <a href="#">5.3</a> </li><li> <a href="#">5.4</a></li></ul>

Click here for preview

After this replace your links with the '#' and your menu item with 1,2,3,4,5,6 etc
and submenu 1.1, 1.2 , 2.1, 2.2 , 3.1 etc
and sub-submenu with like 1.2.1,1.2.2 etc


you can add your own menu and submenu by adding

for adding menu and submenu item
"<li href='your link'>your menu item</li>"
at required place without double quotes.


id=ddtopmenubar is the top menubar where you will see main content of the menu
id=submenustyle is the menu appear after hovering on the menu content.

Still you get problem then post it I will definitely solved it.

tags:dropdown menu for blogger,stylish dropdown menu for blogger,best dropdown menubar,awesome dropdown menubar,latest 2013 dropdown menu blogger,working blogger dropdown 2013,latest dropdown menu.