A simple Drop Down Menu For Blogger

Drop Down Menus are great for adding multiple links in your blog and yet they require very little space space. In addition it makes the site more user friendly and gives it a more professional look. I am going to show you how to add a customizable drop down menu to your blogger blog.

Drop Down Menu Preview:

drop down menu, A simple Drop Down Menu For Blogger

Live Demo

Follow these steps to add a drop down menu to your Blog:

1. Go to Design->Edit Html
2. Download Full Template (This is to backup your template, so that you don’t lose any data).
3. Check the Expand Widget Templates
4. Now search for the following code:
</head>

5. Just place the following code before the code above.

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #FFFFFF;
/*border of the drop down menu*/
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #2875DE;
/*font of each menu element*/
font: 11px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #49A3FF;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>

6. Customize the drop down menu(optional):

Customize Drop down menu, A simple Drop Down Menu For Blogger

You can customize the menu according to your blog. This is optional and use it only if you want a different look than the one already available.

The menu consists of three sections as shown in the figure:

1. Main Menu
2. Drop Down Menu
3. Element of Drop Down Menu

In the code you will find some comments. Below the comments you have some editable code.

Here is the explanation of some of the attributes used in the code:

Background: #XXXXXX

This attribute decides the background of the part and XXXXXX is the hex code of the color. You can change the background of each of the three parts.

Color:#XXXXXX

The color attribute decides the color of the text and XXXXXX is the color hex code.

You can get color hex codes from these online color choosers

ColorSchemer

ColorPicker

width: 123 px

The width determines the width of each element. You can increase or decrease the width according to your choice.

7. Adding the Menu:

a.Go to Design>Page Elements
b.Then click on Add Gadget

Sidebar add gadget, A simple Drop Down Menu For Blogger

c. Then select HTML/JAVASCRIPT

HTML JAVASCRIPT, A simple Drop Down Menu For Blogger

d.Then Add the Following code
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Note: Replace # by the link of the item and if you want to add the menu, say the third element.

Replace <a href=”#”>Order</a> by the following code:
<a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Home</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>

This is for the third menu, for the fourth replace each m3 by m4

f. Save the Gadget and the work is over. The Drop Down menu is live!

Credits: Javascript Array.

Do you have any questions? Tell me!

  • La Huerita

    Your menu works great (thank you!) but I'm having a problem, which is that the drop down parts of the menu fall underneath the top post, so they can't be seen. How do I get it to drop down OVER the post so it can be seen and clicked on?

    My test page is at http://ooeygooeychocolate.blogspot.com (Pay no attention to the original nav bar and the links I have there. As I said, I'm using this as a test site right now so I can make the change to my real blog when this design is perfected) I sure hope you can help me out, because I'd really like to use your menu!

    • http://www.gamer4eva.com/ David Mccue

      Try this, replace the first part of the code:

      #sddm
      { margin: 0;
      padding: 0;
      z-index: 30}

      with

      #sddm
      { margin: 0;
      padding: 0;
      position: relative;
      z-index: 2;}

      Worked for me, had the same problem as you described where the drop down menu was behind my content wrapper.

      • http://wwe-universe-orkut.blogspot.com/ Anubhav

        But after that no dropdown is showing, what to do?

  • gautam

    I don't see any drop down menu on your blog. I have tried it and it worked properly. Tell me if you're still facing a problem

  • Crystal

    I'm having the same problem as above.. If you go to my blog and hold the mouse over "our happenings" then go down to one the the subcategories there.. it will take you to the post will that label. Well, when it is on one of these pages the drop down menu goes BEHIND the label post info.. the rest of it works perfectly… above it and below it but the part that crosses over with the label post box the drop down menue goes behind it and you are unable to successfully continue to that link.

    Help please!!! =)

    My blog is http://www.youandmeplusthree.com

  • Crystal

    Do you know a way I can fix the above problem I am having? I guess I can start looking for a new code, but since I have this one installed already I would like to keep and use it.

    Thanks!

    • http://www.bloggodown.com Gautam

      I think your drop down menu is working fine. I don’t think you need any help :)

      • http://neerajgumla.blogspot.com NEERAJ KUMAR

        my problem is that submenus in a drop down list come under the top post.plz help me in resolving it.

  • Melissa DeSchamp Photography

    Hi –

    Thanks for this. I was wondering if there is a way to modify the menu's width… I need it to be exactly 810px wide for my blog and flush with my header. Any ideas?

    Thanks!

  • gautam

    @Melissa DeSchamp Photography: replace the code of width: auto with the width you want to display i.e width:810px

  • Kashmier

    Hi
    I can not seem to figure out how to get rid of the "HOME" & "DOWNLOAD"
    I just want to show links to my photos that are listed at right.
    I just got the hang of doing html now everything is css. :(

    Thanks in advance'

  • gautam

    @Kashmier: You have to edit the text Home and Download in the code and replace with the text you want to display. And this is in the html code only not the css

  • Kiara

    Hello! Thankyou for posting these instructions!

    My main menu is fine, although nothing appears when i hover over each link! If i click them it goes to the correct location, just the subheadings do not show at all.

    Thanks in advance
    Kiara

  • Victoria

    Hello! Thank you for posting this. It seems to work great on the post(s) pages on my blog but the menu doesn't show up on the main page. Do you know how I can fix this?

  • gautam

    I think you should check where you have placed your code. Maybe your code is such that it displays on single posts but not on the main page

  • gautam

    Can you pls take a snapshot as i am not able to see your website

  • Guest

    So, I got the dropdown menu to work properly and everything, but I would like to know how you add multiple levels/layers. For instance, visit my blog: http://www.wildstateofhockey.com. Under the "Pre-Game Archive" and "Post-Game Archive" tabs I'd like to add each month and then have each game from that particular month available to click on… so, I'd need one more level/layer to the first one that drops down.

    Any help would be greatly appreciated! I really need to get this set up soon! Please reply back as quickly as possible!

  • gautam

    I got what you are talking about. You want a multiple drown down menu for blogger. This type of drop down menu has many layers. Stay tuned i will post about it later.

    Recent blog:=- How to create a Facebook Page for your Blog/Website

  • Guest

    lol Well I need my website to have this multiple level drop-down as soon as possible… so if you could write about it quickly, I'd greatly appreciate it!!! Thank you.

  • gautam

    Will do it as quickly as possible just stay updated with the Rss Feed because i will make a new post about it soon.

    Recent blog:=- 33 super engagers to follow

  • mike

    Thanks for the simple and clear tutorial. I used your code, with some modification of color and adding images and am very happy with the results.

  • Sameh Khan

    Great code, Very easy to edit…

    but i'm still an html newbie…
    How would I go about inserting it into a page? without using the 'HTML/JAVA' feature of blogger. Because I'm using a custom theme, there is not gadget area along the top of the page… but when i try to add this code it says that Your template could not be parsed as it is not well-formed". I'm not askign for direct help, but it would be nice if you could push me in the right direction.

    Thanks again for the code and tutorial

    Recent blog:=- qer4q

  • gautam

    MAke sure you copy the correctly and if it is not working , convert this code via the Ad code converter

  • Anonymous

    great work man… its amazing…

    Recent blog:=- Job Prospects in Indian Banking Sector

  • sriram

    Nice information friend. I will try this in my website. Hope it works

    Recent blog:=- Get the Best Gifts this Winter

  • http://shiftkeyfilms.blogspot.com/ Adrian

    Hi there,

    Great drop-down menu, a real nice addition to my blog that I am building.

    However, I wonder if you can help me out? One the drop down items, the left hand side of the box aligns to the left hand side. I would like the box to be centered when it drops down over the menu heading text (ie drop down down boxes center under ‘ About’, ‘Music Videos’ etc).

    Would you be able to help me here, as for the life of me, I cannot see what to amend (or where I am going wrong!).

    Here is my blog address:

    http://shiftkeyfilms.blogspot.com/

    Many thanks in advance for all your help.

    Adrian
    .-= Adrian´s last blog ..TEST 1 =-.

    • http://www.bloggodown.com Gautam

      you need more css knowledge to edit this. try w3schools.com for more info about css

    • http://shiftkeyfilms.blogspot.com/ Adrian

      Hi,

      Thanks for the info – very useful!

      I am having the same problems as those at the top of this forum.

      The drop-down menu does not drop down over the elements below, so only displays one option in drop-down boxes.

      Is there an easy way to fix this? It seems that a couple of other users have had this same problem as well as above at top of forum.

      Many thanks in advance for your help.

      Here is my blog address:

      http://shiftkeyfilms.blogspot.com/

      All the best,

      Adrian
      .-= Adrian´s last blog ..TEST 1 =-.

  • http://www.lastshredsofsanity.com Shan @ Last Shreds Of Sanity

    I want to use this code, but I also want to keep the graphic I already have for my navbar now (and it has a search bar in it already) will this work?

    Go here to see what I mean:

    http://lsosthisisonlyatest.blogspot.com/
    .-= Shan @ Last Shreds Of Sanity´s last blog ..What’s In Santa’s Sleigh?: Disney On Ice Worlds Of Fantasy Family Pack Giveaway =-.

  • Pablo

    It gives me this error…

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    • http://www.bloggodown.com Gautam

      Give it another shot, I have removed the problem from the code.

  • Julie

    I get the same error message as above. Do you know what we can do??
    Thanks!

    • http://www.bloggodown.com Gautam

      Try again. It should work by now.
      Having any problems, let me know :)

  • http://entertainmentnepal.co.cc aashish

    Friend when i save the template the error looks like = “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.”
    what to do plz… help

    • http://www.bloggodown.com Gautam

      Try again. The error was caused due to blockquote.

  • http://bapak-adam.blogspot.com roseno

    Hi Gautam,
    I’m a newbi in blogging, and currently i get difficulties in changing my blog template standard menu into the dropdown ones. I’ve tried your tutorial but it doesnt work, could you please visit my blog to figure it out and give any advice on it?

    • http://www.bloggodown.com Gautam

      I would advice you to visit
      w3schools.com. It is a good tutorial to learn basic web design and programming

  • Mahoney

    Hi,
    my problem is the same that aashish, so I´d like that you help me, please.
    Thanks

    This is the message:
    Open quote is expected for attribute “{1}” associated with an element type “type

    • http://www.bloggodown.com Gautam

      It will work for now.

  • Linda

    Awesome… The ERROR message (Open quote is expected for attribute “{1}” associated with an element type “type”.) in Blogger shows up because of simple reason:

    replace:

    with:

    just the way the quotes are :)

    • http://www.iltbtestpage.blogspot.com MonChia

      I got the same error :
      “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
      XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.”

      i don’t understand the solution suggested:
      replace:
      with:

    • BG

      Hi Linda, what was the code to fix the error message?

  • JuneBug

    I was wondering if there is any way to have the drop down menu go horizontal instead of vertical?

  • http://demohelp.blogspot.com/ vinaykumar G

    how can i add mouse over menu to this blog pls tel me sir and i did try above but its not working pls tel me sir

  • Erica

    @ Linda-that doesn’t make sense.

    I’m getting the same error message and don’t know what to do.

  • Mayra

    To fix the error :
    “Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.”

    you need to fix:

    with:

    the whole code still doesn’t work for me though. The layers that are supposed to be hidden are still showing up. Still trying to figure out what’s wrong.

  • http://7ths.blogspot.com/ Jonathan

    may i know how to fix it?

    blogger show message as below :

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

  • KUMAR

    I am not able to add the menu
    please help me
    i have very little knowledge of css
    my email is akhil.mdk111@gmail.com

    • KUMAR

      Reply please

      • http://www.bloggodown.com Gautam

        Try now. Let me know if you are facing any problems

  • Samantha

    Dear Sir, First, thank you for taking so much time to help those of us who are not well versed with coding to be able to have pulldown menus on our blogs.

    I am also unfortunately unable to get blogger to accept the code as is. It comes back with the same alert the others are recieving:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    If you have a solution I am sure many of us would be grateful.
    Thank you again
    Samantha

    • http://www.bloggodown.com Gautam

      I have fixed the error. I hope it work for you now.

  • Jessa

    I can’t wait to get these drop down menus working but I’m getting the same error as everyone else:
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute “{1}” associated with an element type “type”.

    Please help
    Thanks so much

  • Jessa

    For all the people with the error:
    Open quote is expected for attribut “{1}” associated with an element type “type”

    all you have to do is replace this:

    with this:

    • http://www.aspoonfulosugr.blogspot.com Samantha

      Jessa,

      All I see is blank on your fix.

      replace what with what?

      HELP!!!

      thanks.
      Samantha

  • http://www.floresser.blogspot.com camila

    hello!
    I have the problem whem will save the model:
    “Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “type”.”
    what i have to do????
    please, i have to organize this menu to go on…
    thanks a lot!!!
    camila
    sorry for my bad english, i`m brasilian…

    • http://www.bloggodown.com Gautam

      give it another try. I think it should work now. Let me know if doesn’t work for you.

  • http://www.washarpies.com Rhyss

    Hello everyone.
    I too share the pain of not being able to Validate the code. Using the validator at http://www.w3schools.com/xml/xml_validator.asp tell us that the is in error.This is stock standard. However if the style half of the code is removed the script passes. I am not a XML coder so I am picking it up as I go.

    I will post a solution if i find one. I suspect it is in the header of the embedded style.

    Rhyss

  • http://www.washarpies.com Rhyss

    This will hopefully make the script validate. Not sure if it works thou
    change ‘
    to
    on first line

    • http://www.bloggodown.com Gautam

      Rhyss, you were partially right, it was due to blockquotes. I have tried it on one of my blogger blogs and it is working fine. It does require a little bit of tweaking to change the size and shape.

  • http://www.bloggodown.com Gautam

    Give it another try. I hope it works for you

  • http://www.washarpies.com Rhyss Edwards

    Thanks

    Works fine now

  • http://friluftslivsblogg.blogspot.com Asbjørn

    Hi.
    I am trying to implement the dropdown menu, but I find it quite difficult, since I am a novice in the area of html codes..
    Can you have a look, and suggest ways to comlete the work i have done so far ?

    http://friluftslivsblogg.blogspot.com/

    Asbjørn, Norway

  • http://tjandstephanie.blogspot.com Stephanie

    A follower told me that the drop down goes behind my post for her? I am assuming she uses explorer? I have safari, firefox and google chrome and it doesn’t cause this problem on any of those.

    How do I fix that?

    Stephanie

  • http://lowcountrycouponmom.blogspot.com katie

    drop down code worked great, but how do i get each menu item or element item to point to the correct page on the blog? i am a total novice to html, but am learning. pointing me in the right direction would help a ton!

    thanks!

  • http://www.thehow2center.com/ Tarun Gupta

    hey ,
    Thanks a lot , working perfectly for me

    http://www.thehow2center.com/

    but I had a question , If I keep it in the add a gadget option just below the header , I cannot see the drop down menu . Can you please suggest what can I do?

  • http://www.thehow2center.com/ Tarun Gupta

    hey ,
    Thanks a lot , working perfectly for me

    http://www.thehow2center.com/

    but I had a question , If I keep it in the add a gadget option just below the header , I cannot see the drop down menu . Can you please suggest what can I do?

    Ticking the notify me button this time

  • http://testingtriplemphotos.blogspot.com/ Marcie

    Hoping you can help. I am using Google Chrome and in this browser, the menus don’t work. I can only click on the first item in the list. It works in IE. Do you know what I can do to fix this?

  • http://sagatips.blogspot.com/ chirag

    i use yr html drop down menu…. its cool yar..
    but i have some problem to use it
    when i put yr html drop down menu….drop down list is go to behind my post area…so it cant accessible….. now what to do…????
    pls check my blog..
    http://sagatips.blogspot.com
    and help me….

  • http://madridistaplanet.blogspot.com/ El Grande

    Hello Gautam.
    I really need your help with this.I installed menu but i dont know how to edit.please answer..my blogg : http://madridistaplanet.blogspot.com/
    my

  • http://www.measuringflower.com TJ

    The menu is vertical instead of horizontal…what did I do wrong? Thank you! Here is is on my Testing blog:
    http://tjscouponingcenter.blogspot.com/

  • http://kelvincastelino.blogspot.com/ Kelvin Castelino

    I have the whole menu installed as you said, but in vain! There is no drop down menu displayed!
    I have only edited some CSS! Thats it!

    My Blog http://kelvincastelino.blogspot.com/

    • http://Website A.K.Rathee

      If anybody want a dropdown menu with css and html only contact me my id is
      ‘rathee.9729945654@gmail.com’

      • http://kelvincastelino.blogspot.com/ Kelvin Castelino

        Thank you so much! I figured it out before u replied to me! :)

  • http://maryannscountrygarden.blogspot.com/ Mary Ann

    Hi
    I am completely new to any sort of computer programming. I basically need some tab on my blog to describe my Privacy Policy so I am in compliance with AdSense. I don’t want to sell anything, etc. I’d just like a tab that says “Privacy Policy” that folks can click on and read the policy. I put your menu up but it doesn’t work for me. Please help! :)

  • http://spurgurgle.blogspot.com spurgurgle

    hi there, firsty this is a great code. i’ve been searching for a top down menu code that i could easily customise for a few days now, and wsnt having much luck, til i found this one, it worked great first time, and then worked even better once i customised the look of it :)

    the only issue is in the pop down menu, i cant click the links as they go behind the post section theres just no click me mouse courser on them then they pop back into the main menu… u can see this on my test site http:/spurgtest.blogspot.com can anyone help me with this issue…????

    i blagged this quite well on my real blog http://spurgurgle.blogspot.com by adding another html widget with a div /div code in as a spacer, but this isnt quite right… i would rather the drop down menu goes over the post text…. this will do for now but once i add more pages (items in the sub menu…) i will need to spce down the post area even more with more html spacer widgets….. (messy code for the search engine bots) so i would rather not have to do this

  • http://barebarnemat.blogspot.com Kristine

    Hi
    I have the same problem as mentioned above;
    the menu folds out under the top post.
    I have no clue how to fix it, so would greatly appreciate some tips!
    Menu looks great otherwise, thank you!!

    Kristine

  • Pingback: Best 15+ Blogger Hacks Of All Time | telabela.com

  • http://www.custo-minz.com custo-minz

    I am attempting to customize the size of the original nav bar for the drop down menu. When I change the padding
    #sddm li
    { margin: 0;
    padding: 5px 35px 5px 5px;

    three dots become visible. Could you please assist me in how to remove these dots.
    How do you change the size of the nav bar to become smaller and how do I add the drop down menu to the other main menu headings

  • http://www.custo-minz.com custo-minz

    I am attempting to customize the size of the original nav bar for the drop down menu. When I change the padding
    #sddm li
    { margin: 0;
    padding: 5px 5px 5px 5px;

    three dots become visible. Could you please assist me in how to remove these dots.
    I too am having the problem of the drop down menu going behind the content area.
    Please help

    • http://gdogd7.blogspot.com Gdogd7

      I know it’s been some time since you commented on this but did you ever find out how to get the drop down menu in front of the content area?

  • http://www.easy-xs.blogspot.com anna

    it’s work!! thanks…..

  • http://matagoan.blogspot.com matagoan

    Hi, thanks for the tips. I have trouble installing the application though. I already added the html code but nothing happens? Any suggestions? :)

  • http://matagoan.blogspot.com matagoan

    duh! sorry guys, i wasn’t just following instructions! i finally got it working, all i have to do is to customize it. thanks a ton! :)

  • http://am6100.blogspot.com Anpam Mittal

    Hi,
    I have a problem with drop down menu bar. how i bring front drop down menu bar on flash. you can check it at my blog-http://newenglishvid.blogspot.com
    Thanks.

  • http://passgate.blogspot.com/ Salini

    Hi,

    Installed the menu :) thanks!! However, I have the same problem as raised in some of above comments.

    1. When I place mouse over the dropdown menu items, it is not getting selected and there is no “click me” icon

    2. the dropdown menu is gone behind the posts.
    my blog is ->http://passgate.blogspot.com
    Kindly help!
    Salini

  • http://bbcrecollections.blogspot.com/ Doc

    I used your drop down menu and it works great in FireFox, Chrome, etc., but it goes haywire in IE. The menu tabs are blank and expand down into the posts.

    Can you or somebody look at my source code (http://bbcrecollections.blogspot.com/) and see what I can do to fix this?

    Thank you so much in advance!
    Doc

  • http://Website henry

    awesome tutorial! I’m still kinda new to blogger and I don’t know how to add it to the real navigation bar… All I have now is a navigation widget at the right side of the blog. please tell me how to that!

  • http://www.jrollerphotography.blogspot.com Jana Roller

    I’m having trouble with the drop down menus. They keep appearing behind the blog posts and I don’t know how to fix it. I don’t see a reply from you to other people who have had the same problem. This is a wonderful code and it is easy to customize. I don’t want to have to get rid of it because of this so please can you give me a solution.
    Thank you
    Jana

  • http://Website Jothis

    Hi
    Thanks for the tip and its woking fine

    One problem i am facing is that ” in the dropdown i have lots of link to add. So if could tell me how to add scrollong bar in the dropdown menu”

    It will be helpful adding more links under one main menu

    Expecting a quick response from your end

    With regards
    Jothis

  • http://www.thefierceblogger.com BRUUN

    Hi, first of all I want to thank you for your great tutorial (:

    Second, I do have a problem though.
    When I want the menu to dropdown, it is BEHIND the other posts, so you can’t click or see them because it’s behind it.

    Next to that, when I remove the ‘Pages’ from the page-elements, it won’t fold out anymore.

  • http://carbloggergr.blogspot.com Dimitrios Sarafidis

    Hi, I want to thank you too for your great tutorial

    I do have the same problem mentioned in an earlier message.
    When I want the menu to dropdown, it is BEHIND the other posts, so I can’t click or see them because it’s behind it.

    my blog is
    http://carbloggergr.blogspot.com

    in help is appreciated

  • http://shadesigns4u@blogspot.com Sara

    Same problem, cannot get the drop down menu to appear in front of posts and other objects. Need help!!!!

  • http://www.timandmalinda.blogspot.com Malinda

    Hey Gautam,

    The link looks awesome on my website. However, I am having the same problems like those in other recent messages. My drop down menu is hidden behind my post or page. I can see 1 1/2 elements on one of the column, but that is only before I change the width to 183px. So I know it is working…I was wondering what you told other bloggers on how to fix this problem.
    Thanks for the help and making this available for us beginners.
    Malinda

  • http://www.aralinsafilipino.com/ Aralin

    This is the most helpful info i found today about putting a drop-down menu.

    Thanks.

  • http://luavanphuc.co.cc luavanphuc.blogspot.com

    I have the same problem, i cant click on submenu because it’s hidden behind blog layer. I can see it but i cant click it.
    Please help us.

  • http://iheartmykpop.blogspot.com/ Cris

    cannot get drop down menu to appear!!! did i did any thing wrong??? Help Me!!! reply asap!
    thank you!

  • http://mukut-blogopedia.blogspot.com/ mukut

    Thanks a lot. I have used it in my blogspot (http://mukut-blogopedia.blogspot.com/) but having some problem. If there are 4/5 sub menu of a main menu, and its length cross the blog text overlapping submenu showed behind the text which links doesn’t works.

    Temporarily, I add some HTML/JAVASCRIPT with simply “.” to make space below the menu gadget. Please show me a solution.

    • http://www.techmansworld.com/ Michael Hazell

      Your blog has annoying JavaScript alerts. There is no way to translate that page, so I can’t check out your site. That is one way to get people away from your site.

  • http://kenyajobtube.blogspot.com/ Mikee

    Thanks alot for this useful tip. i Have put it on my website… it looks great.

    • http://Website Ashok

      You are welcome. I’m very happy if it helped you.

  • http://- joshua

    hi, can u help me create a blog , for my assignment>

    • Rathee 9729945654

      Hi dear I was away from all the things for 5 months but if you want it now I will help you because now I am back again.

  • http://familyfoodplans.blogspot.com Julie

    Thank you for code, it has been very helpful. I just need to fix my drop down menu, it is hidden behind my post page. Can anyone give me instructions on how to do this. Thank you.

    • http://gdogd7.blogspot.com Gdogd7

      I saw that you mentioned that you had the drop down menu problem about 3 weeks ago and visited your site and saw that you had fixed it. May I ask how you did so? Here is my site gdogd7.blogspot.com

      • Anon

        I have managed to fix mine!!

        go to > Design
        then   > Edit HTMLand on the first part of the copied code find this bit its just under style V V V

        #sddm
        { margin: 0;
        padding: 0;
        z-index: 30}

        insert under this >       margin-Bottom: 100px;
        under where it says {margin: 0;
        so it should look like this
        V V V

        #sddm{ margin: 0;margin-Bottom: 100px;  padding: 0;z-index: 30}

        change that margin-bottom number to increase the gap between the menu and the post

        sorry its not very clearly explained
        x

        • Anon

          oops should look like this

           V V V sorry#sddm{ margin: 0;margin-Bottom: 100px;padding: 0;z-index: 30}

          • Anon

            –___– 

             its not meant to be in a continuous line meant to be on separate lines like the one further up just add margin-Bottom: 100px;
            underneath {margin: 0;

    • Rathee 9729945654

      Yes I will help you.

  • http://homeschoolaffirmations.blogspot.com/ Mechelle

    Hi there! I have been working on this for hours now. I am needing some tips from you. I have copied the code in HTML and have installed the menu to my blog. When I go into customize the drop down menu, I insert the links and the name etc but when I go to my blog to check the link, nothing happens…I am not sure what is going on. I had my first menu set up and then when checking after I completed all four menus the links stopped….weird. I erase and started over and still cannot get my links to work. any suggestions????

  • http://www.bhojpurigaane.com BG

    WONDERFUL MENU..I WAS LOOKING 4 IT

  • Maria

    Hiya,

    Such a fab tutorial – thanks a million for posting it! :) I’d been playing around with code but couldn’t get it right until I came across your site. You’ve saved me a lot of work. :)

    I’m just hoping that you could point me in the right direction one more time. Menu looks great in Firefox (9.0.1) but in IE (8) it appears fine for a second and then all the boxes move to the side of the page and appear blank. Any advice on how to fix this? I gatehr that Doc had a smiliar problem several months ago. Any help would be fantastic.

    Thanks

  • http://downeystummyjourney.blogspot.com Maria

    I followed your instruction and I was able to put the dropdown menu without a problem. I would like to know how to add a submenu to each dropdown menu. Please help

  • Kristin Koblentz

    Is there an Internet Explorer fix? I played with the z-index to get the drop-down in front of everything with Chrome and FireFox and it works great, but on IE it bunches up at the top and looks terrible.

  • Chiq

    hi! 
    how do i add drop down menu without using the add gadget?i have this on my blog but i don’t know how to edit it – (http://www.dramahaus.blogspot.com/)example:HomeKorean==>Drama==>MovieJapanese
    ==>Drama
    ==>Movieplease help me… thank you so much

  • Sharoncth

    hi… im wondering how do i change the detail of my drop down menus

  • http://www.techtutshub.com/ Hammad Baig

    Awesome dropdown navigation menus thanks

  • Basia

    Does anyone know how to add third level of menu? 

  • http://www.techmansworld.com/ Michael Hazell

    Is there a way to add this to blogger but without all of this code editing? I guess for now I’ll have a limited page bar.

  • http://www.facebook.com/people/Brian-Hanson/100000201949794 Brian Hanson

    The menu buttons all show behind the posts, how do I fix it?

  • marty preston

    so I added it and it looks like my old one its not dropping down how do I make it dropdown

  • Pingback: Winter Blogathon 2013 – It’s Day Two | Biannual Blogathon Bash

  • Christietime

    The dropdown menu links aren’t working. How do it get the sublists to show so that the links will be live? I’m so close I just need a little more help!

  • http://www.facebook.com/patricia.decrane Patricia Dupre’ DeCrane

    is there a drop down menu that can be added to a blog that will actually store blog entries?

  • Pingback: Top Blogger Hacks(Tips) of all time - Blogger Seed