Add Beautiful/Awesome Multilevel DropDown Menu In Blogger

Drop down menus helps your readers and visitors to easily navigate through your blog's important links or categories and it will help your readers to easily navigate through your blog. The HTML structure of this menu is so easy as you have to use only <ul> and <li> tag. Now this tutorial will show you How To Add A Beautiful/Awesome Multilevel DropDown Menu In Blogger.


Multilevel Drop Down Menu Demo



LIVE DEMO


How To Add A Beautiful/Awesome Multilevel DropDown Menu In Blogger


  • Go to Blogger Dashboard --> Layout --> Add A Gadget
  • Select HTML/Javascript and paste the code shown below in it

<script src='http://latest-hacks.googlecode.com/svn/gadgets/dropdownmenu/menu(1).js' type='text/javascript'></script>
<link href='http://latest-hacks.googlecode.com/svn/gadgets/dropdownmenu/menu.css' rel='stylesheet' type='text/css'/>
<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>
</a></li></ul>
</div>

MENU CUSTOMIZATION

  • Normal ul and li rules are applied
  • Replace # with your own link

Like it? Share it.

7 comments

Reply
Pravin Purohit
17 July 2012 at 03:21

hi Sonu , nice post :) thanks, can you tell me how to fotter to my blog as on ur website ?

Reply
Anonymous
9 August 2012 at 12:00

Installed it. But unable to see the sub menus. They keep hiding behind the post. I use blogspot.

Reply
Unknown
9 August 2012 at 12:20 Author

@Biswajyoti Mukherjee Add this code in the widget
<style>
#menu *{ z-index:10020}
</style>

Reply
Anonymous
10 August 2012 at 23:07

Where to add this code?

Reply
Unknown
11 August 2012 at 01:14 Author

@Biswajyoti Mukherjee Add it above the code

Reply
Xeric
2 September 2012 at 15:45

@sonu, I also have the same problem, the sub menues keeps on hiding behind the post. Not exacvtly the posts but the just disappear half the way. But when I shift the widget to somewhere else other than under the blog title(on left or right side bars), they work fine. I have also tried the solution that you have give to Mukharjee but to no avail. Please help.

Reply
Unknown
3 September 2012 at 03:26 Author

@Xeric Khakiate Add this code in the widget
<style>
#menu { z-index:10020}
</style>

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )