Sunday, February 3, 2013

How to create drop-down menus in Blogger

This post is a definite side-step from my usual topics, and I know the side-step won't be of interest to everyone. I apologise in advance if that is the case for you, and will be back tomorrow with a post that is food-focused rather than web-focused. For today, though, I did want to document the following for those of you who have asked about drop-down menus. It also seemed wise to document the information for my own reference.

Although this post is written for Blogger, the HTML components should be applicable to WordPress and other blogging platforms too. I just can't advise on where you should make changes, or on which sections of your template to edit.

By drop-down menus, I am referring to a set of tabs that open up to additional, drop-down tabs when you hover over them. You can see them along the top of this blog, and if you use the internet, you will undoubtedly have used them to navigate content at some stage.

This is what I'm talking about...

You can use drop-down menus to navigate to separate pages on your blog, or to navigate to sections within a page. In my case, an example of the former is the drop-down menu under 'About this blog', which allows you to navigate to 'Disclosure policy' (a separate page). An example of the latter is under 'Recipes', where you can navigate to different sections of the overall Recipes page. To make links to different sections within a page, you will need to create anchors. If you aren’t familiar with them, I recommend reading Johanna’s tutorial at Green Gourmet Giraffe, which is where I first learnt about how to create them.

Once you have created your pages and/or anchors and know what you want your drop-down menu to include, you are ready to start. Before doing so, check that under Blogger's 'Pages' (down the side menu of Blogger), you have selected to show pages as top tabs. (We will change this later but it is easier if it is on to start with.)

You now need to make changes to your Blogger template in three places.

The first change is under Layout, where you want to add a customisable ‘HTML / Java Script’ gadget. To do this, click the ‘add a gadget’ box underneath your blog header. Then scroll down to ‘HTML/Java Script’ and select it.

You will be asked to enter a title and content for this new gadget. The title can be blank. For the contents, copy the following: 

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='LINK TO PAGE 1’>NAME OF PAGE 1</a>
  </li>
  <li>
  <a href='LINK TO PAGE 2’>NAME OF PAGE 2 </a>
      <ul>
      <li><a href=’LINK TO PAGE 2, SUB-PAGE 1 '>NAME OF PAGE 2, SUB-PAGE 1</a>
      </li>
      </ul>
  </li>
  <li>
  <a href='LINK TO PAGE 3'>NAME OF PAGE 3</a>
      <ul>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 1’>NAME OF PAGE 3, SUB-PAGE 1</a>
      </li>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 2’>NAME OF PAGE 3, SUB-PAGE 2 </a>
      </li>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 3’>NAME OF PAGE 3, SUB-PAGE 3 </a>
      </li>
      </ul>
  </li>
</li></ul>
</div>

The sections in capitals need to be customised to your blog. For me, the start of the syntax looks like this: 

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='http://www.bitesizedthoughts.com/'>Home</a>
  </li>
  <li>
  <a href='http://www.bitesizedthoughts.com/p/about-this-blog.html'>About this blog</a>
    <ul>
    <li><a href='http://www.bitesizedthoughts.com/p/disclosure-policy.html'>Disclosure policy</a>
    </li>
    </ul>


Save your gadget. At this stage the formatting won’t be at all right, so if you preview it, don’t worry about how it looks (it will look wrong!).

Your Layout page should now look like this:





The HTML / Java Script along the top is what you have just added.

For Step Two, go to the Template section of Blogger. You can do the following through ‘Edit HTML’ (which is actually what we did when working out what to do), but it is easier if you select ‘Customize’.



Select 'customise'


When in the Blogger Template editor, select ‘Advanced’. Scroll down to the very bottom of the list of editing options, to ‘Add CSS’.

Copy the following into the ‘Add custom CSS’ box:

.Header h1 {text-shadow: 2px 2px #FFFFFF; }
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
/* background: #ff0000; */
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height: 41px;
}

#mbtnav {
background: #909092;
margin: 0;
padding: 0;
}

#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid #333;
border-right:1px solid #333; */
height:41px;
}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#mbtnav li a:hover, #mbtnav li a:active {
background: #909092;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#mbtnav li {
float: left;
padding: 0;
}

#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}

#mbtnav li ul a {
width: 180px;
}

#mbtnav li ul ul {
margin: -35px 0 0 161px;
}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}

#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #909092;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}

#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}

.tabs-outer .widget, .section {
margin:0;
}

.tabs-inner {
padding: 0px;
}




This is where you paste the above syntax


You can preview the appearance of your menu now. As the above is set to the formatting I wanted, you will probably need to change things like colour, font size, and so on to suit your own requirements. You can change these in the CSS syntax above.

Once you are happy with the format and appearance, there is one final step to do. 

Step Three is required to make it possible to navigate your blog's pages when the site is viewed on a mobile phone. Blogger’s standard way of showing pages (not a drop-down menu) automatically adjusts when someone views your blog on a mobile. You want to keep that standard system for phone views, but turn it off for computer-based views that will now benefit from your drop-down system.

To achieve this, you will need to edit your HTML. When in the Template section of Blogger, select ‘Edit HTML’ and then do a search (control + F) for ‘PageList1’.

This will bring up a line of syntax that you can edit to look like the following:

<b:widget id='PageList1' locked='false' mobile='only' title='Pages' type='PageList'/>

You should now have drop-down menus when your blog is viewed through a computer, and a phone-friendly menu version when your blog is viewed on a mobile phone.

For extra advice and information, also see this post and try searching for 'CSS only drop down menus'.

Lastly, Mr Bite offers the tip of creating a random, non-public blog (given Blogger blogs are free) that you can practice formatting changes on before transferring them to your 'real' blog. My tip is to find your own Mr B equivalent who can do that testing for you and then help you out!

Update June 2013: A few people have let me know that they couldn't get the code to work until they used double quotation marks (" ") instead of single (' ') in the link html. So, instead of the following:

  <li> 
  <a href='LINK TO PAGE 1’>NAME OF PAGE 1</a> 
  </li> 


You may want to try:

  <li> 
  <a href="LINK TO PAGE 1">NAME OF PAGE 1</a> 
  </li> 


Update July 2013: Johanna at Green Gourmet Giraffe shared her experience on adding drop down menus in this post, based on her experiences with the information outlined here and in other tutorials.

I always love receiving your comments and questions, but please note that I am not a trained programmer and I don't have the knowledge or capacity to answer detailed questions about how the above might be modified to your blog or specific needs. If you leave a question below and I know the answer, I'll certainly reply. However, I won't be able to respond to detailed or lengthy questions that are beyond what I can assist with. 

116 comments:

  1. I am so pleased to see this post - it is exactly what I hoped would appear here after I saw your drop down menus - now I just have to find some time to fiddle with this - not this week but maybe soon. Many thanks! (I wish I had a Mr Bite to advise me on such things but am pleased to have your advice meanwhile)

    ReplyDelete
    Replies
    1. I'm so glad - I hope it helps when you do get time to fiddle, and that you can get the result you want. Think of it as reciprocation for how helpful I found your anchors tutorial :-)

      Delete
  2. although I don't use blogger anymore these posts are always so helpful to me!

    ReplyDelete
  3. Kari I think my brain just exploded a little...

    ReplyDelete
  4. You are a clever little duck! I used to use blogger but my lovely website designer lady does all the hard stuff for me. I just populate it with food and useless info about myself!

    ReplyDelete
    Replies
    1. I should really say that the cleverness was entirely Mr Bite! He worked it all out and proof read this post for good measure :P

      Delete
  5. You are soooo clever! Thanks for posting this - now I need to work out which things I want a drop down on ;-)

    ReplyDelete
  6. Replies
    1. To be honest, mine too, just a little. Apologies for the pain and I promise there isn't more of it to come!

      Delete
  7. I just left blogger for wordpress!!!! bummer!! You are a genius!

    ReplyDelete
    Replies
    1. I think wordpress offers lots of things blogger doesn't, so you'll probably be ahead in the long run :) And thank you, even though the knowledge is not really from me, but only conveyed by me!

      Delete
  8. I hate to say it, but I'm really glad I'm with wordpress. I got some advice before I started blogging and that was to go with wordpress. I know a lot of bloggers on blogger who for one reason or another have switched to wordpress. I think if blogger wants to maintain or increase its users, it would be wise to make the system more user friendly xx

    ReplyDelete
    Replies
    1. I actually looked in to switching to wordpress because it has some features I'd really like (various 'add ons') that blogger doesn't have. However, when I looked at the start of this year, it seemed like there was quite a lot you had to pay for to benefit from? So I stuck with blogger, which I find very easy to use, it just doesn't have everything wordpress does. I'm glad you're happy with what you started with and stayed with :)

      Delete
  9. Thank you for posting about this. It's working fine. :)

    ReplyDelete
    Replies
    1. I'm so glad it helped! And thank you so much for taking the time to let me know - I really appreciate that.

      Delete
  10. Kari,
    This is a fantastic help for those of us hoping to add some fun and function to our blogs. 2 questions I wonder if you can answer- how can I center this menu bar on my blog and how might I add small vertical lines between my menu items?

    I'm not really familiar with CSS and so am not even sure what to search for in Google to assist!

    ReplyDelete
    Replies
    1. I don't know off the top of my head but I will try and find out and then let you know!

      Delete
    2. Hello again,

      Regarding the centering, I have my menu set to 100% of my blog width, which means it sits level with my header. This is controlled with:

      #mbtnavbar {
      /* background: #ff0000; */
      width: 100%;


      If your header is particularly narrow or wide, you may want to try changing that percentage from 100% and seeing what happens? It may be that the issue is a width one rather than a centering one - i.e., your menu isn't lining up correctly with the rest of your blog.

      Alternatively, the drop-down part of my menus are left aligned. This is controlled with:

      #mbtnav ul {
      float: left;


      If you want the drop-down bit to be centered, you could change this to 'float: center; ' and see how that looks. There are a few places in the syntax above where the 'float: left; ' is referred to, so you'd need to update all if you change them.

      As for the vertical lines - I am not sure! Sorry! However, you can change the font size of your menu items by adjusting the font size referred to in the syntax above. If the issue is that menu items run into each other, and you want the vertical lines to divide them, using a smaller font size might help to add some separation?

      I'm sorry not to have more specific responses but hope the above is of some help at least. Otherwise you may have to track down someone more knowledgeable than I!

      Delete
    3. Very good post, thanks. I have a problem though. Our right menu tab is now a little bit dislocated. I can't find out where in the codes I can make it centered again. Please take a look at http://www.undervannshus.no/ and you will see the right column sort of overlapping the main section to much..

      Delete
  11. How do you add the drop down menu to a navigation bar that is already made. (I had someone build my website with the tabs in place but I want a drop down menu on some tabs)
    Thanks!

    ReplyDelete
    Replies
    1. I'm afraid I don't know that one - you'd need to edit the code so depending on how your menu was created for you, that could be easy (follow the above steps) or more challenging. Perhaps consult the person who built your website?

      Delete
  12. Hello, I have one question, in your drop down menu, the main items (like Recipes, etc.) contain link within themselves. I mean, when you click on 'Recipes', the page that is linked to 'Recipes' will open.

    I would like to create a drop down menu where the main item doesn't have a link to another page, so if a user clicks on it nothing will happen, only the sub-menu will appear.

    How do you do this? Thank you

    ReplyDelete
    Replies
    1. You can use my code above, just take out the URLs / links in the first set of code I posted.

      To have additional menus come off the drop-down list, you just use that same set of code but add another level in. So, you'd have page 1 [highest level]; page 1, sub-page 1 [drop down]; and then page 1, sub-page 1, sub-sub-page 1 [menu off the drop down list]. I'm not sure if that will make sense, but you could also search elsewhere to find some specific code examples.

      Delete
  13. this MBT drop down menus. I used this, but now I want to place it at the center of my blog. Here in your code, it was placed at the left. is it possible to place it at the center? what should I do? please email me here lovely.tamahome@yahoo.com. thanks

    ReplyDelete
    Replies
    1. Hi Grace, I can't provide specific advice / assistance, but somewhere in your blog's code there will be instructions about whether things are aligned center or aligned left. You can search for that and then modify if needed.

      Delete
  14. Hey, thanks for posting this. I know you're not a programmer but do you have any thoughts on why the formatting part of it wouldn't be working for me? I have tried it and have looked at the code and am stumped as to why the formatting part isn't working for me. If you can't comment, I understand, but in that case could you make any recommendations for someone who can finish it off for me? :)

    ReplyDelete
    Replies
    1. This is the sort of question I might be able to answer...although when you say formatting, what bit are you referring to exactly? The relevant code should be in the 'part two' of what I run through above, but one possibility (if you're using Blogger) is that you still have Blogger's regular page tabs active along the top as well as the new drop-down menus you're trying to set up. If that's the case, you'd have a really messy top row of tabs / menus. If so, you can turn these off either in the Layout section of Blogger, or by checking that the code in my third step above (to make things right for mobile phones, and turn off Blogger pages on computer views) is done as that will also address it.

      If I've misinterpretted your question, feel free to provide clarification and I'll see if I can help further :-) If I can't, searching for 'CSS only drop down menus' and 'troubleshooting' might turn up some helpful things.

      Delete
  15. This is a great post. I'm having a little trouble though...when adding html code to a gadget (as in step 1) blogger keeps chopping off the first few lines of code upon saving. Its driving me nuts!! Is there something I need to change elsewhere to stop it doing this?
    Thanks

    ReplyDelete
    Replies
    1. That is bizarre! And it would drive me nuts too. I have never come across that before, which makes me think it may be a Blogger issue you could report to Blogger. It sounds like a glitch in their system / your blog that they could advise on. It certainly shouldn't be happening and as far as I can say, shouldn't be linked to the code.

      Delete
    2. Hi, I had the same issue that you had. Here is what I figured out:

      If Blogger is removing your code upon saving, it means that there's an error in your coding. It's removing it because something isn't right. Maybe a tag isn't closed, you have too many tags (accidentally posting a closing tag twice for example will mess it up) or you haven't replaced the ' with " (You should have a href="yourwebsite" rather than a href='yourwebsite').

      I'm sure there are websites that give you workspaces to test your coding, but I just use Notepad, save my file as an HTML, and then open it in my browser. When everything looks right there, then I know all my coding is correct.

      Once I fixed that, everything went pretty smoothly.

      Good luck!

      Delete
    3. Hi Kari! This was a great post and very helpful. Thank You!

      I too had the same issue and Skelly's suggestion above regarding replacing ' with " resolved it. Thanks Skelly.

      I have one last issue which is that the drop down list doesn't appear although I can see a change when I hover over that page/tab name (that has sub-pages)! Its as if it is hidden or is constrained by the width of the tab for pages. Any suggestions please?

      Delete
  16. Visit Here

    http://prohelpers.blogspot.com/

    ReplyDelete
  17. how to add content to the pages it says no pages found

    ReplyDelete
  18. excellent. Thanks for sharing this. Now could u tell me where do i store the pages which are linked to dropdown menus iteams.

    ReplyDelete
    Replies
    1. Which platform are you blogging with? In Blogger, the pages are stored automatically when you add new pages. I'm afraid I'm not familiar with other blogging platforms so can't answer more specifically than that.

      Delete
  19. Thank you for this helpful post bro! Indeed it's very interesting. :)

    ReplyDelete
  20. Thankyou for this sharing.
    do you know how to change the colour? i tried googling, but still cant doo it :|

    ReplyDelete
    Replies
    1. I mean the text colour, and the background colour also, thankyou :)

      Delete
    2. You actually change / manage colours separately from setting up the drop down menus - it is part of your template and settings for text colour. In Blogger, if you go to Template, then Customise, and then Advanced Settings, you can change the colour of all aspects of your blog (text as well as background).

      Delete
    3. thx for reply :D
      but i mean, the text colour in your drop down menu. i still cant change it, even i tried to change in advanced setting

      Delete
    4. In that case, have you tried changing the colour codes in the second block of html above? E.g. -

      #mbtnavbar {
      /* background: #ff0000; */
      width: 100%;
      color: #FFF;
      margin: 0px;
      padding: 0;
      position: relative;
      border-top:0px solid #960100;
      height: 41px;
      }

      Where I have 'color: #FFF', you can change to something else. To find code for the colour you want, just google 'html colour codes' and you'll find plenty of results :)

      Delete
    5. ok, thankyou so much for your help :D

      Delete
  21. Thank you so much! You have no idea how much you helped me !^-^

    ReplyDelete
  22. hallo mJari thank you for your help, i am new to blogger/blogging, i tried linking my pages but i failed how to do it. my blog is http://bbaupdates.blogspot.com

    please help

    ReplyDelete
  23. Thank you so much! This tutorial is amazing. I had a few glitches at first but then read the comments at the bottom and figured out where I had gone wrong.

    It is so easy to use :)

    http://talesof-wanderlust.blogspot.co.uk

    ReplyDelete
    Replies
    1. I'm so glad - thanks for letting me know :)

      Delete
  24. Hi Kari, Thank you for sharing this helpful guidance. I am trying to apply the steps you've provided here but my problem is, after putting all information which is needed for having several drop down menus for each tab, there is only one item shown for each of the tab. Do you know where the problem is?.. My blog is www.bukucatatanhira.blogspot.com.au.

    I am trying to copy and paste the information that I used to create my dropdown menu but the system doesn't allow me to send it here.

    Thanks before.

    ReplyDelete
    Replies
    1. Hello

      I have the same problem as yours. Did you arrive at solving it?

      Delete
  25. Hi Kary, wow this was so amazing! unfortunately i went totally wrong with something. if you could take a look i would so greatly appreciate it! ive been looking all over on how to make this drop down menu! i am the closest o making it happen with your help! thank you. please help me!! i would appreciate all the time and help thank you so much
    idella
    http://linenandcookies.blogspot.com/

    ReplyDelete
  26. Oh this is awesome! I had no idea you could create drop down lists in blogger, my mind is now boggling with all the possible changes I can make to my layout. I was on the verge of going to WP because I didn't think blogger would do what I wanted. You have made my day, can't wait to give this a go.

    ReplyDelete
  27. Hurrah - I have done it - thanks very much kari - brilliant post

    ReplyDelete
    Replies
    1. oh there seems to be a problem with my margins on my posts - will look into it but may come back for advice if I can't work it out - seemed too good to be true - at least it is just a minor issue

      Delete
  28. Hello. can you please help me? when i click the menu bar or drop down menus, the link lead me to a post in my blog that say ''Sorry, the page you were looking for in this blog does not exist.'' why???

    ReplyDelete
    Replies
    1. Hi,

      As per my line in the post, I can't really help with specific queries / issues because (i) I am not technologically advanced enough to do so! and (ii) everyone's blog is set up differently and I simply don't have the skill or time to work out how to help you with your issue. However, in your case, it sounds like the problem could be simple - something must be wrong with how you have entered the links for your drop down menu pages. I would double check your code for that first and hopefully it may fix the issue. There are also some comments above that give advice or suggestions for things people did differently that worked in their situation.

      Delete
  29. please do take a look at www.voguebuzz.blogspot.com thank you.

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Thank you so much for nice n easy Post.
    I m still implementing it. But the issue with me is my drop down menu is hidden behind the page and it getting cropped.

    www.g33ktricks.blogspot.com

    ReplyDelete
    Replies
    1. Hello

      Could you solve the issue? I have more or less the same problem. In my drop down menu, only one item is displayed. Is it the same with you too?

      Thanks for the help

      Delete
  32. I have been struggling with drop down menus and this has given me a massive boost in the right direction, thanks to you and @Johanna GGG for posting the information.

    I am now stuck with coulours...onwards!

    ReplyDelete
  33. Yoga Teacher Training Rishikesh-200 hour yoga teacher training programs & yoga instructor courses certified by Yoga Alliance (RYT 200) at registered yoga school (RYS 200).

    ReplyDelete
  34. Thanks for such a great and helpful post! I tried it and can only seem to get it partly right! In third tab the drop downs are messed up. And the menu bar is off to the left...I would need to adjust color and font but I leave that for last. Can you help me figure out what Im doing wrong?
    Thanks!!
    www.HealingLev.com

    ReplyDelete
  35. OK! Its getting clearer BUT now the drop downs are hiding behind my posts....Help?

    ReplyDelete
  36. Although I have been searching for this, I don't know what I'm doing wrong, but it's not working. I followed every step.

    ReplyDelete
  37. Hi all above,

    Please note my comment at the end of this post that I'm not in a position to provide specific advice or guidance on how to apply this to your blogs. I simply don't know! If my html doesn't work on your blog, you may need to consult a professional web designer to assist. If I ever do have any easy answer I will leave a comment in reply, but otherwise I won't be responding to each query.

    ReplyDelete
    Replies
    1. PS. I am always grateful to hear when it does work!

      Delete
  38. Hi Kari
    this is what i was looking for
    i want to know is there any way
    i can use these drop downs for labels instead of pages
    for instance i have a menu by the name BEAUTY
    and under that (sub menu ) i have eyes,skin care,hair
    now all the posts related to eyes go automatically without me doing anything and all my posts related to skin care go under it respectively
    or maybe can u have a tutorial of how to use drop down menus plzzzzzz
    if u do so i cant thank u enough

    ReplyDelete
  39. hi kari i am tird linking pages and am not don it can u please help me my blog is tipsbyharsha.blogspot.com
    add me in fb please

    ReplyDelete
  40. This is exactly what i need! i have bookmarked this for my blog and will try it soon. Thank you so much for your excellent post.

    ReplyDelete
  41. Thank you very much.I did as you mentioned.it worked

    ReplyDelete
  42. Thank you very much!!! :* I really need this on my blog.

    ReplyDelete
  43. Thank you so much for this! I also have a vegan-related blog, but I found your blog by searching for a drop-down menu guide. While it wasn't exactly straightforward, and I did need to figure out how a lot of it worked myself (challenging, but fun, and a good review of my html and java from university ten years ago) I could never have done it myself without this guide! My new menu is at vegantaiwan.blogspot.com. Thank you!!

    ReplyDelete
  44. Do you by chance know how you would edit the coding if you were adding this to the navbar area? I am redesigning my blog and got rid of the header widget and have placed my header image in the navbar area but I cannot get this to work that way. Would love it if you knew how. Thanks so much.

    Kimberly

    ReplyDelete
    Replies
    1. I'm afraid I don't know Kimberly - sorry not to be able to assist. I didn't used to use the header widget either but had to turn it back on to make this work :S

      Delete
  45. Hi Kari,
    Thanks for this detailed coding info. I am trying to create a drop down, and at the final stage now. However, I am not sure how to change the colors/font in the CSS. Any tip on that would be great. Thanks!

    ReplyDelete
  46. Thank you for posting this. My name is Susan and I am the creator of Sadie's Gathering. I have been searching for awhile in how to do this for my "Recipes" section because it's getting too big, and I don't wanna make visitors to Sadie's have to scroll a mile down.

    Just a quick question, for your June update, did you mean double comma, or double quotes? you wrote double comma, but it looks like double quotes.

    Would like to know before I take the deep breath and make the leap.

    Thanks so much!
    Susan - sadiesgathering@gmail.com

    ReplyDelete
    Replies
    1. Hi Sadie,

      You're absolutely right! Thanks for pointing out my mistake. It should be double quotes not double commas.

      All the best for setting up your menus!

      Kari

      Delete
  47. Help me with my blog: http://jbinze.blogspot.com/
    It works great but the color and there's something wrong with the css T^T

    ReplyDelete
  48. Thanks so much! you have helped me a lot :)

    ReplyDelete
  49. Hi, when i change the 'PageList1' syntax to:


    the row of Pages on the website disappears, and I am still unable to select from the drop down menu on mobile.

    ReplyDelete
  50. Thank you so much for this post. It helped me a lot.

    ReplyDelete
  51. Hi There,
    Thank you for your help.
    I have only one problem : I couldn't find the Pagelist1 in the HTML code.
    Any ideas?
    Thank you <3

    ReplyDelete
    Replies
    1. I used 'page 1' and similar to refer to the first page you want to link to. So, your page name won't actually be 'page 1' but whatever your own page is called. I'm not sure if this is what you're referring to but is the only thing I can think of that may be causing you issues. You should label your pages according to whatever they are titled on your blog.

      Delete
  52. awesome, i searched at many places, but finally it worked for me.

    ReplyDelete
  53. Nice post!.its very helpful for me thanks for share.

    ReplyDelete
  54. I found this SO helpful to get started! However, I'm having trouble with a couple things and hoping you can help me. So far, I got my two main tabs up and I got one sub-menu to pop up under the correct place. However, I need a couple more under that one sub-menu and can't seem to get the code to work properly! Any suggestions?

    Also, I see the response above about searching and not finding "PageList1" but still not sure what I should search for? I'm so new at this. :)

    ReplyDelete
    Replies
    1. Actually, I got my sub-menus to work after a bit more playing around! :) There is space between them though....any idea where to adjust those in my CSS code? Wow, this is deep stuff! :) After looking at several other pages though, yours was THE best and most clear info!

      Delete
    2. I'm glad you worked it out Kelly! With adjusting the space between them, you could try playing around with the 'width' descriptors in the syntax above?

      Delete
    3. I will try that. It's not bugging me too much. I need to focus on celebrating the baby steps of getting submenus to work! Getting them to look prettier can wait! :)

      I'm still working on getting the mobile step to work though. I'm not sure what to search for...?

      Delete
    4. By the way, I hope it's okay that I gave you some credit on my blog. :) Sorry to say, not many people are reading it since it's brand new, but you might have someone migrate over here for your fabulous directions!! :)

      Delete
    5. Sorry for the delayed replying! First, thanks very much for the credit - if course it is okay! Very kind of you :)

      Regarding the mobile step, do you have a custom template (or a detailed template) on your blog? I know someone else couldn't use the same process I did because of their underlying template being different. That's the only thing I can think of.

      Delete
  55. I had no idea you could create drop down lists in blogger, my mind is now boggling with all the possible changes I can make to my layout. I was on the verge of going to WP because I didn't think blogger would do what I wanted..

    ReplyDelete
    Replies
    1. I'm so glad I could give you an option within Blogger :-)

      Delete
  56. Thanks for such a great and helpful post! I tried it and can only seem to get it partly right! In third tab the drop downs are messed up. And the menu bar is off to the left ...I would need to adjust color and font but I leave that for last. Can you help me figure out what Im doing wrong?

    ReplyDelete
    Replies
    1. Gosh, I really don't know I'm sorry :( I'm not at all an expert, the above is just what worked for me. I'm not sure what would be contributing to the things you mention.

      Delete
  57. Hello I’ve managed to create a drop down menu but now I’m having trouble posting into these specific categories. I’ve tried tags but they don’t work. What am I doing wrong? Would really appreciate if you could answer me as soon as possible, I’ve been stuck for weeks and nothing on google seems to cover my question! My blog is

    http://allroadsleadtorhodes.blogspot.gr/

    Thanks again,
    Alexia Xxx

    ReplyDelete
  58. Thank you for sharing this helpful guidance. I am trying to apply the steps you've provided here but my problem is, after putting all information which is needed for having several drop down menus for each tab, there is only one item shown for each of the tab. Do you know where the problem is?

    ReplyDelete
  59. Hi!

    Everything was going great until I went to click on the subcategories in the drop down menu and the drop-down box completely disappears! HELP! What to do?

    Thanks for the tutorial!

    xo,
    Ashley
    www.studywithstyleblog.com

    ReplyDelete
  60. yea it works for one of my sites. cool

    ReplyDelete
  61. all about learnings...

    http://scoutshrm.blogspot.com

    ReplyDelete
  62. Article sounds awesome and informative, Nice to read

    ReplyDelete
  63. Wellbutrin's rate dropped to 7% with the other medications
    dropping to between 23-30%" A. Occasionally ejaculating before either you or your partner is ready should be of no great concern. However, only withdraw an inch or two from time to time while your penis is still deep inside her vagina.

    Look at my blog; premature ejaculation sex videos - -

    ReplyDelete
  64. Good information, By using your article, Am easily created awesome blogger..Thanks for sharing..

    ReplyDelete
  65. Great blog! Is your theme custom made or did you download it
    from somewhere? A design like yours with a few simple tweeks would really make my blog stand out.
    Please let me know where you got your theme. Many thanks

    Also visit my weblog - peis extenders

    ReplyDelete
  66. Very good post, thanks. I have a problem though. Our right menu tab is now a little bit dislocated. I can't find out where in the codes I can make it centered again. Please take a look at http://www.undervannshus.no/ and you will see the right column sort of overlapping the main section to much..

    ReplyDelete
  67. This is a very helpful blog,, thank you!!
    now i can have a very nice menus in my blog!!

    ReplyDelete
  68. The information provided on this blog is very important for us. One should be aware of all these things. Keep sharing in future.

    Yoga Healing Programs | Chakras and Quantum Physics

    ReplyDelete

I genuinely appreciate all comments and the time taken to post them. Occasionally, I may need to restrict commenting to registered users in order to halt large volumes of spam. If that happens, I will lift the restriction within a week.

Want other ways to interact? Bite-sized thoughts is on Facebook (https://www.facebook.com/bitesizedthoughts) and Twitter (https://twitter.com/bitesizethought).