A Vertical Multi-Level Drop Down Menu For Blogger Blogs

Here’s a cool widget to fit as many possible links as you want in the minimum possible space.
The widget is completely customizable (background color, text color and number of tabs/links).

Follow these simple instructions, to add this widget to your blog:


Log in to Blogger, and go to “Layout” -> “Edit HTML

Search for this code in the template:


Now immediately ABOVE/BEFORE that, paste THE CSS code from DynamicDrive:

NOTE (Important): In the code from DynamicDrive, copy the code ONLY till this tag


and the code from

<script type=”text/javascript”>

onwards, paste it in the HTML/JavaScript widget (read STEP #2 below).

Now save the template.

Then go to “Layout” -> Click on “Add a Gadget” and select it as “HTML/JavaScript” type.
And paste this code in it:

<div class=”sidebarmenu”>
<ul id=”sidebarmenu1″>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Folder 1</a>
  <li><a href=”#”>Sub Item 1.1</a></li>
  <li><a href=”#”>Sub Item 1.2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Folder 2</a>
  <li><a href=”#”>Sub Item 2.1</a></li>
  <li><a href=”#”>Folder 2.1</a>
    <li><a href=”#”>Sub Item 2.1.1</a></li>
    <li><a href=”#”>Sub Item 2.1.2</a></li>
    <li><a href=”#”>Sub Item 2.1.3</a></li>
    <li><a href=”#”>Sub Item 2.1.4</a></li>
<li><a href=”https://bloggerstop.net”>Blogger Help</a></li>

NOTE: Also paste the remaining code from STEP #1 in the same widget.

If you are looking for horizontal multi-level menus then you may read these tutorials:
New Multi-Level Drop Down Menu
Multi-Level Drop Down Menu For Blogger

And for a sliding side menu, have a look on this post:
A Sliding Side Menu For Blogs

Credits: DynamicDrive

19 thoughts on “A Vertical Multi-Level Drop Down Menu For Blogger Blogs

  1. Edit the contents of your template. Learn more
    We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "menuids.length" must be followed by either attribute specifications, ">" or "/>".

    im getting this error please help me

  2. @ALL

    In the code from DynamicDrive, copy the code ONLY TILL


    and the code from
    <script type="text/javascript">
    paste it in the HTML/JavaScript widget.

  3. this menu works fine, except I cannot see any of the subfolders… it goes behind the body of the blog… I'll only be able to see the subfolders if I have a really large sidebar.. is there any way to make the subfolders go ontop of the blog content?

  4. Hi Eva, on your blog I found the slidemenu-horizontal and not this vertical menu, so I guess you changed your mind after writing this comment. Anyways, if you want to show the arrow icons in your menu, then use the modified slidemenu.js file uploaded by me, instead of the one downloaded from dynamicdrive.


  5. Hi,
    I think i Have encounter the same problem as Eva. The menu works fine for me. But I realized that the vertical drop down menu will not appear on my body panel when I used Firefox or Chrome whereas the dropdown box will appear on top of my body panel when I used IE to view instead. So is there any ways to modify the coding to solve this problem?

  6. hi sai,i hav a long vertical menu,so sub-menu items are going beneath the screen for links present at the bottom of the menu,
    i want them to be visible always on the screen,i.e to move the sub-menu items as required to view always on the screen ven the mouse is over the main menu item,
    can u suggest me any solution to fulfil my wish
    thanks in advance

  7. Hi, thanks for this post. I tried this template but there is empty space between the list in the main menu. Also, the sub menu opens up a distance to the right away from main menu. I don't know what is causing it.

  8. PLEASE HELP!!!!!

    I have two issues that i cant solve myself. I've installed all the necessary codes etc for the sidebar multi level menu and after checking it on a sperate tab with all the original wording it works properly.

    Ive since changed some of the names on the side bar and the colour then saved it. As yet i havent added any urls to the code, would this make a difference? Now when i check the page on my laptop the menu appears infront of my posts but on another computer it's sitting behind my posts.

    The second issue may be related to the first, on my laptop where the menu appears infront of my posts i can hover over the menu bar and for example i can see 'folder 2' and 'folder2.1' appears but im not able to click on it. The second part of the drop menu disappears when i try to move my mouse onto it. Ironically, on the second computer where the drop menu appears behind the posts i can hover over the first part of the menu and move to all the sub headings.

    Is this a error in my code or am i having a stupid blonde moment?!?!?!? My blog address is http://www.bijoubylulu.blogspot.com if you want to take a look at the problem. If its not too cheeky to ask please can you email me your thoughts re this matter, my email is fatalbeauty1@msn.com

    Can i also say it was a huge relief to find your blog with an easy to follow code and instructions, yours was the only one ive been able to follow without my brain exploding.


Leave a Reply

Your email address will not be published. Required fields are marked *