Blogger

How to Create Menu with Sub-menu For Blogger Without Any Scripts

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

blogger navigation menu, css menu, drop-down menu

The “advantage” so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your “Layout” and on the “Page Elements” section.

  • Click on the “Add a Gadget” link just under your header image
  • From the Gadget’s List, select “HTML/JavaScript” option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the “Title” section of this widget blank.

<div id=’menucol’>
<div id=’topwrapper’>
<ul id=’top’>
<li><a href=’http://YOUR URL HERE.com‘>Tab 1 Title Here</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Tab 2 Title Here</a></li>
<li><a class=’submenucol’ href=’#‘>Tab 3 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.1</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.2</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.3</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.4</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.5</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class=’submenucol’ href=’#‘>Tab 4 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.1</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.2</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.3</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.4</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.5</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class=’submenucol’ href=’#‘>Tab 5 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.1</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.2</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.3</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.4</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.5</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.6</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.7</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href=’http://YOUR URL HERE.com‘>Tab 6 Title Here</a></li>

</ul>
<br class=’clearit’/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be ‘clickable’. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href=’http://YOUR URL HERE.com‘>Tab 7 Title Here</a>
<ul>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 7.1</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 7.2</a></li>
<li><a href=’http://YOUR URL HERE.com‘>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now let’s go a step further and add the CSS style in our Template

  • Go to Template > Edit HTML

  • Click on the sideways arrow next to <b:skin>…</b:skin> 

  • Then click anywhere inside the code area and search – using CTRL + F keys – for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
———————————————– */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

If you want to change color of the background of the tabs then go to Blogger Dashboard > Template > Customize > Advanced > Tabs Background > From there change it to your desired color.

STEP 4: The final step is to Save the Template and you are done!
Hope you had not met with any problem…if any comment below.

Article written by:

Satyendra is a market researcher from the city of nawabs, Lucknow. Apart from blogging, his other interests are Indian rap knowledge, affiliate marketing, research, and basically anything nerdy.

Join the discussion

  1. Unknown

    I have tried it but prob is the drop drop menu doesnt come but show side by side. how can i deal with this

  2. Satyendra Maurya

    can i have your blog link in which you have applied the code?

  3. GODSH1014

    hi , I have used above code ,tabs and sub menus are there but upon clicking them the page does not opens … it ask for login to blogger account . could you help with this .. Blog address: atshealth4u.blogspot.in

  4. Satyendra Maurya

    Hi, you have to change your URL Link. You have given incorrect URL Links in the code. Please correct it.

  5. GODSH1014

    hi Can you help with how to increase the width of menu bar since if I am adding new submenu it is not shown in the menubar. my site is http://atshealth4u.blogspot.com/

  6. GODSH1014

    Also let know how to increase the width on both side left as well as right keeping whole menu bar in centre position of blog.

  7. Satyendra Maurya

    check whether you have added the new submenu in correct tag. and if you want to increase the width of submenu then change the width in this code in this code in you html #top li ul, #top ul li {
    width:300px;
    }

  8. Md. Aktarul Islam

    This is working.Thanks a lot.

  9. Md. Aktarul Islam

    I want to change the menu color.How can I change this?

  10. Unknown

    I already did it, how can I add my post to that menu?
    Blog: applemoretips.blogspot.com

  11. Satyendra Maurya

    You can give links of your post in the menu in place of "http://YOUR URL HERE.com"

  12. Unknown

    I mean that I already have the Menu, but I don't have post in the Menu, I want to put some post in the menu, how can I do?

  13. Satyendra Maurya

    Sorry but this Menu only supports Labels or any link to your post and it will not show posts in it.

  14. Uday Thummala

    ya finally i has Solved my previous problem …..
    Now a new. My question is "How can i add posts to one of the page in drop down menu"
    So please kindly Replay me. As soon as possible….???
    Tq

  15. Satyendra Maurya

    Search for http://YOUR URL HERE.com and change it with your URLs in the sub part.

  16. Uday Thummala

    This comment has been removed by the author.

  17. Uday Thummala

    Sir thank you for your kind replay … hear my problem is ….
    HOW TO ADD SOME POSTS TO THE 'SUB TAB 3.5' PAGE"
    {I HAS CREATED PAGES TO ALL SUB TABS NOW I WANT TO ADD POSTS UNDER THAT SUB TABS}
    SO PLEASE REPLAY ME ….. THANK YOU IN ADVANCE

  18. Uday Thummala

    EX:- In your blog "TECHNOGEEKZONE" you has a tab "BLOGGING ZONE" under that tab their are lot of sub tabs like "Articals to read, Make money & Tips and seo" so how can i add posts to "Tips and Seo" tab.
    replay…
    THANKU ADVANCE

  19. Satyendra Maurya

    May I have your blog URL? only then I can suggest you some changes. Otherwise you can change the name in "Tab 3 Title Here" to "Tips and SEO" then add the URL under 'SUB TAB 3.1' and rename it.

  20. Uday Thummala

    http://www.googletechno.com is my blog url. I am willing to add posts to whatsapp tab which is present in social networks tab in my blog

  21. Satyendra Maurya

    change your url of whatsapp tab to http://www.googletechno.com/search/label/Whatsapp?max-results=10 and go to your post and add label of Whatsapp to it and then opening the link will display all posts labelled Whatsapp. just like in my blog when you will click on Articles2Read then all post with label Articles2Read will be displayed. Labels are case-sensitive use the same spelling in url which you used in post. if any problem then I will be adding a new post on blog about how you can categories in blogger using labels.

  22. Uday Thummala

    thank u bro …… thaks for ur response … i can work out on it

  23. tomiwa stephen

    Thanks Man. But I encountered a problem. The sub-menus are not dropping as I positioned my cursor over the main menu. It's a new music blog. website=> http://www.mbnigeria.blogspot.com

  24. Satyendra Maurya

    You have delete the sub menu code of class "submenucol"
    This is the reason no drop down is there.

  25. tomiwa stephen

    thanks bro I was able to figure out the problem. the only challenge left that /* Columns
    ———————————————– */
    is missing. i was careful enough not to tamper with any of the code lines. Please help.

  26. Satyendra Maurya

    Post is now updated! check it again. Those extra code has been merged.

  27. SouthIndianClevers

    Hi I just followed the steps. But i dont see any change. Plz help me.

  28. Satyendra Maurya

    You have done something wrong because you can see that I also used the same code on my blog and it works perfectly.

  29. gid

    This comment has been removed by the author.

  30. gid

    Thank for the tip but doesn't work in my blog. I want to have a sub menus, can you help me to correct the code. You can see my blog HERE. Thank you in advance.

  31. Indrajeet Singh

    Hi i copied your code as given. nothing i changed.. but still sub menu are not being showed.. can you advise me.. what i have to do change i my block https://programminglogic4u.blogspot.in/#

  32. Unknown

    unable to add more than two sub-menu in a menu. Plzz help…

  33. Satyendra Maurya

    Check that you have properly closed all the tags.

  34. Anannsul

    Hello, I've tried your code here and was having some trouble. With my first template being one of the "Watermark" selections, the menu did drop down but it only displayed one or two rows. I then changed my template to one of the "Awesome Inc." selections and it didn't drop down at all. I made a final template change to one of the templates under "Simple" and it works perfectly.

    I think this menu and possibly any drop down css menu will only work on the "Simple" templates.

  35. Anannsul

    Agh.. I can't edit it. I should note that with every template change I DID add the css code again as switching templates removes it.

  36. Anannsul

    Also wanted to add that if you don't move your mouse down fast enough to catch the link that tiny little 1px space between the main menu and the drop down part is enough to make the submenu disappear.. I fixed it by adding margin-top: -1px; to the #top li ul { } section. :3

  37. Unknown

    Hi…
    could you help me how to add submenu from my blog : http://www.albertacollections.blogspot.com, your help will mean alot to me, thank s

  38. Narelle Fasulo

    I have added the code and all works brilliantly. But I seem to have an extra box to the right of the menu that I can't seem to get rid of. My site is http://www.simplystampingwithnarelle.com Thanks

  39. Unknown

    wow it works.

  40. Sreekanth

    This comment has been removed by the author.

  41. Hacking or Security

    This comment has been removed by the author.

  42. Hacking or Security

    sir the menu bar is working properly and submenu bar also but submenu bar is single Horizontal and when i paste the codes on the place the codes are not working

  43. Hacking or Security

    sir maine apne jese bataya same vese hi kiya but mere dropdown menu nahi aa ra main kya kru bataiye sir please

  44. KDean

    I was trying to make my blog accordingly. But unfortunately I couldn't do it. Can you help me to solve the problem?

  45. Satyendra Maurya

    follow all the steps correctly. For proof I have also attached the same code on this post also.

  46. Unknown

    hellow, can you tell me on how to hide those submenus? i see that all showing up over there. just check my Blog https://royalfashiontz.blogspot.com

  47. Sangram

    Hey, I've used these, but it shows in two columns in the drop-down list. Check this blog, where I've used this for testing.
    https://photos2photography.blogspot.in/

  48. Satyendra Maurya

    just delete all submenu codes from the HTML/Javascript code given in post.

  49. Satyendra Maurya

    this code is meant for two columns in the drop down list

  50. Sangram

    Thank you.. My problem has been solved..

  51. Estiak

    My blog URL : https://estiakahmedbd.blogspot.com/
    It does not work out…

  52. Unknown

    I have theme not template.

  53. Prasad Pakhare

    This comment has been removed by the author.

  54. Prasad Pakhare

    Hi using the code provided i was able to create drop down menu. But problem is with the selection of subtabs i am unable to see all the content with that labels on my blog when i am selecting a particular subtab. Could you help me with this

  55. Unknown

    Thank you for share code drop down menu and submenu.

  56. Unknown

    This comment has been removed by the author.

  57. Unknown

    This comment has been removed by the author.

  58. costfree4all

    Thanks for the tutorial, its very useful. I just made new blog using your code and its perfect. Just need few adjustment to fit my needs. Looking forward for other tutorial from you. 🙂

  59. Admin

    Interesting Blog. Keep it up.
    Dude, would you like to tell me how i can create Submenu and again another one inside submenu. Any help would be appriciated. I need it for http://www.Chilloey.com

    thanks

  60. John Griff

    How come after all is done, i only see 6 tabs of the 25 tabs i have on my menu
    Your programe and CSS code are great but i made all these tabs and only a row of them show?

  61. Admin

    Can you please check this menu is perfect or need some corrects : http://www.chilloey.com

  62. LIVE FILTER FREE

    hi i want to add sub menu in first and and 2nd tatile also what should i do

  63. LIVE FILTER FREE

    hi ,, i followed your code.. it is working fine in desktop. i can see all the menu tab there but not in phone .. only 3 tabs i can see in phone.. why so?

  64. rojov

    thankyou but i need only for one column submenu kindly help, i have tried so many with your code but could not get

  65. Unknown

    Sir created the menu but I have not been able to create a submenu! Please help me..

  66. Unknown

    Sir created the menu but I have not been able to create a submenu Please help me..

  67. Unknown

    I add first code by few edits (as required to my blog ) and then save gadget without "title" then I paste given 2nd code in html section of theme(template) as you instructed and also save theme and click to view blog but my blog look was remain same. Then I check HTML gadget in layout. I click to edit gadget but here I getting following error

    Invalid widget: HTML4

    Error 400

  68. Nokari.net

    I was face this issue. I have done big R & D on this . I watched all YouTube videos related to adding sub menu also I googled for it. but there is no any tool .

    After this I have notice that ,
    1) The bloggers who are saying in their videos to use various trick to add submenu to blogsite, they can not work, cause the template they are using is not from blogger . They are using third party template like – wix & others.
    so this idea will not work to general blogs whose are using blogger template (theme) cause blogger has update their version.

    2) Few bloggers given trick to use underscore _ in the starting of page name
    while adding page . They are saying , if you use _ before page name, then it will be add under previous menu.
    I tried this trick too but as I said blogger has update their version so also this trick is not working . Now current version showing this underscored page name in main menu list

    So all after this i find a solution which is not 100% helpful to me but it is working.

    Go to your blogger
    1.Click on: Theme
    2. Click on: Edit HTML
    3. click anywhere in HTML code and press Ctl+F
    4.In search box type: Cross-Column 2

    5. you can found word: Cross-column 2
    after this word you can see another word: showaddelement='no'/>

    in this just delete to: no
    and add to: yes
    after this your code will look like: showaddelement='yes'/>

    6 save your theme.

    Now you need to do some work about your menu & sub menu list
    cause now you have two menu bar

    i suggest you to add main menu on 1st bar which is already you have
    maybe you already added your menus by using page gadget. but in 2nd bar I suggest you to use labels.

    now you need to decide which labels should be use in first and second bar

    hope this is helpful to you.

  69. Dastan Creation

    same problem what i do ?

  70. Jaawpreneur

    Hi, I did as you directed in your post but on my blog the menu explained above shows as a long list in my header area instead of having the look of a menu bar and it looks strange that way.

  71. Jaawpreneur

    Kindly help out. Thanks

  72. Sunracemangesh

    Hi Team, I am new to blogger and need your help. On my blog I need to create index on right side and create sub Indexes.

    For example of we make a index on right side from 1 to 10 then if we hower cursor to 1 then it will show Subindexes from A to etc.

    Also need to know how to link pages to Subindexes.

  73. THE SOURCE FOR MUSIC 101

    what is add here do you mean http://YOUR URL HERE.com?

  74. Satyendra Maurya

    Change YOUR URL HERE with your website or Blog's URL

  75. Babasaheb Sargar

    THANK YOU VERY MUCH FOR BLOGGER HELP

  76. Desire

    This comment has been removed by the author.

  77. Amanda Lillie

    This was SO helpful! Thank you for just donating the code to us (So nice not having to write it) I tried watching multiple tutorials and none of them really address the drop down, they just show how to add tabs at the top. This was clear and easy to execute! Thank you thank you!

  78. AG PATHAMUTTOM

    This comment has been removed by the author.

  79. Sangita Panchal

    I have all the commands and getting the proper submenu blog. But when I change my theme and tried all the commands again, I am getting the vertical menu – not proper horizontal menu. Pl. guide me.

  80. Zoe

    hii..can i know how to change the menu colour and the font ?

  81. Chirag

    I am trying to making menu but code doesnt working

  82. jackobyuosf

    Thank you so much!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

back to top