Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.
To see this drop down menu in action, visit this demo blog

blogger menu, drop down menu, css menu

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:


and search (CTRL + F) for the following line:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove the code in red.
You may have many parts as the one in red, delete all you find.

....then find this section in your template:
/* Tabs
----------------------------------------------- */

...and remove all that is within it, until you reach to the Headings part.

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */

Then add this to where the code has been removed (instead of the code in green):
#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 .widget ul, .tabs .widget ul {overflow: visible;}
Having done this, we can finally add our menu.

How To Add Horizontal Drop Down Menu to Blogger

To put this horizontal menu with submenus in your blog, then follow the next steps:

Step 1. From Template, go to Edit HTML and just above ]]></b:skin> paste these styles:
/* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px; 
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(http://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}


Screenshot
Step 2. Save the Template


Step 3. Go to Layout > click on Add a Gadget link


Step 4. Choose HTML/Javascript and paste the following inside the empty box:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

Customization:

- replace the text in blue and red with your links and titles.
- if you need more tabs, then add a line like this just above <!-- Search Bar -->

<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>

- if you want to add a tab with sub-tabs, then add this code:

<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>
<ul class="sub">
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
</ul>
</li>

- and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this:

<li><a href="Link URL" class="fly">Submenu Title</a>
<ul>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
</ul>
</li>

And that's it! Now Save your Widget and enjoy your new drop down menu! ;)

    Random Posts

68 comments:

  1. Peter T.4/20/2013

    Super cool menu bar. But how do you make the gap smaller between the menu bar and the date field in the (post)?

    ReplyDelete
    Replies
    1. You could add this declaration to .tabs-outer {:
      margin-bottom: -50px;
      Increase/decrease the "-50px" value depending on your needs.

      Delete
  2. Added this and it looks great! Quick question though when I hover over the menu the drop down opens but the drop down box isn't fully square. On the right it flows into the next menu title. Does this make sense?!
    Is there a way of customising the search box? I don't want it be be a box just purely 'SEARCH............... (Then the dotted to just be a line)
    Also is there a way of placing the menu above my header instead of underneath. Ideally I would like it to be top right. Tried doing this in the layout section of blogger but doesn't allow it.
    I absolutely love this blog. It's people like me that aren't very confident with HTML which it's great for. Your explanations are always so clear. Thank you!

    https://lucygarrick.com

    ReplyDelete
    Replies
    1. 1. Sorry but I don't see where's the issue, could you please make a screenshot?
      2. Just ABOVE ]]></b:skin> add back the CSS style for the search box found at step 1, that starts from #search { ... You can add a background to where are the annotations in green (just remove that URL and add a color hex or the url of your image (don't forget the semicolon)) or change the color of the search text (just below #search-box { add a new declaration, for eg. color: #689FD2; ). If you want to change the search text, replace the "Search here..." text from step 4, which is below the annotation in green (there are 3 of them)
      3. For adding the menu above the header, please refer to this tutorial.

      Delete
  3. Hi, thanks for the tutorial. My new navigation bar is indented slightly though. How do I get it left aligned with my page title, blog post box, etc??

    Thanks

    ReplyDelete
    Replies
    1. Hi Will,

      Add this line just below #menuWrapper { (step 1):
      margin-left: -15px;

      The "-15px" value represents the distance from the right side (if you add a bigger value, it will move to the right).

      Sorry for the late reply!

      Delete
  4. how do i direct the links to open up in new tabs

    ReplyDelete
  5. ok i got it by using the tag

    ReplyDelete
  6. What is red code that i ve to delete.shall remove all the code

    ReplyDelete
  7. Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

    http://freebietemplate.com/css-designs/css-designs.html

    have a nice day

    ReplyDelete
  8. thanks for this widget, by the way a saw your blog not using pages widget. can you please make a tutorial about modifying default pages on blogger?

    ReplyDelete
  9. Thanks! Only problem is my blogs don't show the child menu's when it's put under the header widget. It shows them when in the footer or sidebar, but not at the top. It's like it's hidden behind the blog.

    ReplyDelete
    Replies
    1. Thanks! Only problem is my blogs don't show the child menu's when it's put under the header widget. It shows them when in the footer or sidebar, but not at the top. It's like it's hidden behind the blog.

      Delete
    2. Please add this code to Template > Customize > Advanced > Add CSS:

      .tabs .widget ul, .tabs .widget ul {
      overflow: visible;
      }

      Hope it works now...!

      Delete
  10. can't find this part in my template:
    ***

    /* Tabs
    ----------------------------------------------- */
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    #layout .tabs-outer {
    overflow: visible;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;

    border-top: 1px solid $(tabs.border.color);

    }

    .tabs-cap-bottom {
    bottom: 0;
    }

    .tabs-inner .widget li a {
    display: inline-block;

    margin: 0;
    padding: .6em 1.5em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-top: 1px solid $(tabs.border.color);
    border-bottom: 1px solid $(tabs.border.color);
    border-$startSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li:last-child a {
    border-$endSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    color: $(tabs.selected.text.color);
    }
    /* Headings
    ----------------------------------------------- */

    ***

    :( ..what should i do?

    ReplyDelete
    Replies
    1. Try to find the 1st line /* Tabs and delete the code until you reach to /* Columns, THEN replace it with the one above. Don't forget to make a backup first. Hope this will work for you.

      Thanks for visiting! :)

      Delete
    2. .Cahaha. brother /sister
      i perfectly set this style drop down menu
      this site admin this site write this (go to blogger and temple and edit html then press (CTRL + F) and and search for the following line) edit html ctrl F press and search your desied word this search are do not work you have to do copy all html in edit html and paste it micro soft word then press ctrl F and you find you desied word edit html ctrl F a search do not you have to search manually line by line html in edit html ar html .....you know language bangla or hindi. i best write bangla language.

      blogger ar temple ar edit html ctrl F diya search a kaj kora na. edit html ar total html copy cora ms word paste kora ctrl F diya search koran. tahola paban. edit html ar html apnaka manually search korta haba. tahola paban

      Delete
    3. Go to Edit HTML >> Then Struck Ctrl + F and then Type Only Tabs.
      Press Enter if you are not able to find it, then Enter continuosly watching and tracking the words like /* Tabs. Then You will got this.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I think you meant to ask how to reduce the space between social media icons and the blog's header? If so, then add the following code above ]]></b:skin> :

      #social-icons {
      margin-bottom: -50px;
      z-index: 2;
      position: relative;
      }

      Delete
  12. "Great tips for bloggers. These tips are really very helpful and i will definitely apply them on my blogs.
    Thanks for share!"

    ReplyDelete
  13. Anonymous6/02/2013

    I don't understand which parts in red you're supposed to delete. Could you be more specific?

    I tried a few variations but nothing is working. All the submenus are all everywhere on the top, open, and without any styling.

    ReplyDelete
  14. Great post - really useful! Just a quick question: after putting the drop down menu's in, I now have a gap between the menu bar and where the content for the post starts. Is there any way of reducing this gap? You can see what I'm talking about here: http://stevenscaffardi.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hi Steven,

      Please find this code in your template:

      .main-inner .column-center-inner {

      ...and just below it, add this line:

      margin-top: -50px;

      Increase or decrease the -50px value to change the distance.
      Hope this works. Thanks for stopping by! :)

      Delete
    2. BTW, if sidebars are on a lower level, then add margin-top: -50px; below this code:
      .main-inner {
      ALSO remove the padding-top: 35px; declaration from below.

      Delete
  15. Hi,

    How can I add content to the submenus?

    ReplyDelete
  16. This menu is great, thanks so much for the thorough tutorial. The only thing I'm having trouble with is that I'd like to size the width to be the same size as the blog header image, but when I try changing some of the code that I thought would do that, the only thing I seem able to do is get your search bar to extend horizontally out to the right, I cant get it to adjust to be the same size as the image (see here: http://ppromstories.blogspot.com/) Any advice?

    ReplyDelete
    Replies
    1. @Erin,

      You should change the width percentage of 100 to 110%, which is just below #menuWrapper {
      Or you could add it in pixels:
      width: 840px;

      And to move it to the left, add this line below #menuWrapper {:
      margin-left: -50px;
      Where "-50px" is the distance from the left - you could also modify this value to be in line with your header.

      Delete
    2. Perfect! Thanks! I used the px and wound up having to move the margin -30 px to the left but now its all aligned. You are a miracle worker!!

      Delete
    3. You're welcome :)

      Delete
  17. hello can somebody clear it which code to remove after this and only red part of each line to remove or whole line

    ReplyDelete
  18. Good article. Prefer pixels instead of percentage. for css drop down menus/ jquery menus with source code, http://www.fremenu.info/2013/06/js10.html

    ReplyDelete
  19. Just want to say your article is as astonishing. :) The clarity in your post is just great and i can assume you're an expert on this subject.

    ReplyDelete
  20. hi! great post over there...well, I just want to ask on how to move the search bar on the right side....because it appears to me on the middle...thanks!

    ReplyDelete
  21. There's no instances of "Tabs" anywhere in my code... very upsetting :(
    In some places, large chunks of code have been compressed into "..." and I've even expanded those and searched, but still nothing. Why is this? Is there anything I can do?

    ReplyDelete
  22. I COULD NOT FIND THE section in my own html,i only saw a / after 'yes'/>
    what would i do?

    ReplyDelete
  23. Hi I tried this but went bad :( I also have a few things I wann tweek on my blog http://www.purrpleivy.com/ and want to know if you could do it for me? I'm happy to pay. Thanks

    Ivy

    ReplyDelete
  24. marcio8/30/2013

    how to remove the Leaf?

    ReplyDelete
  25. Anonymous9/01/2013

    hi, nice post!
    Just one problem,is there any way I can stop tab 1 from being a different color to the other tabs, might be to do with my theme, thanks

    ReplyDelete
  26. Thank you so much. I cannot tell you how you helped me.
    I wished this drop down list in my blog and your help made my wish true.
    Thank you so much.

    ReplyDelete
  27. hey,my submenus are not displaying..
    here is my blog..http://explorevariousthings.blogspot.in/
    plz help

    ReplyDelete
  28. Search BOX IS ALSO NOT WORKING..HELP ME

    ReplyDelete
  29. its not working for me .. plz help :(

    ReplyDelete
  30. thanks a lot for this trick... i removed the radius that made the menu rounded on the edges, how do i remove the margins in right and left to make it extend full width of the page? thank you

    ReplyDelete
  31. Greetings. New to blogging and desinging. (not a programmer).
    I would like to know how to link posts to sub menu. Thank you n advance

    ReplyDelete
  32. I used a drop down menu coding but code not get the desired result as the drop down menu is not completely displaying below the Lead Title.
    Please check it on my website and respond me.
    www.sureshotpost.com

    ReplyDelete
  33. hello there, can anybody help me? I confuse of which red part should I remove? there's a darker red and there's also a light red colors in it. So which of them should I remove?
    I hope anybody there would help me with this. thanks

    ReplyDelete
  34. hello there, I am just new in blogging and I wanna create navigations with drop submenus but I don't know which red tags should I remove and should I remove the whole line that u told before deleting those red tags? I hope u can help. I spent for this within 2 days and I'm very sad coz I can't get it :( I hope u can help me with this. I'll be so glad if so. Thanks

    ReplyDelete
  35. Few minutes ago I posted comment and ask something but yeah I got it for reading the content of your post again. I misunderstood it that's why I didn't got it for 1st try. Thanks for this post. You help me a lot. :)

    ReplyDelete
  36. hello, lock my test blog
    http://teknoceztest4.blogspot.ro/
    menu work fine but pointer click title 2/submenu 2.2/submenu 2.2.4/ -problem
    how i can small diference betwin submenu 2.2 and this simbol ▶
    can u help me?

    ReplyDelete
  37. It is too good. But how to add another link on the menu panel.

    ReplyDelete
  38. This has worked perfectly for my website! Thank you so much!
    http://www.livinggringo.com

    ReplyDelete
  39. My menu's background color is not the right one. What can I do?

    ReplyDelete
  40. Thanks Man
    We need more and more Blogger Widget ;-)
    You deserve a clic

    Greetings from Sardinia

    ReplyDelete
  41. Thanks man, you deserve a clic ;-)

    Greetings from Sardinia

    ps: we need more and more Blogger Widget

    ReplyDelete
  42. Is there an option to remove the leaf picture from the end???? As it is not matching with my website layout..

    ReplyDelete
    Replies
    1. Hi Lambert

      Replace the address in the #search part (step 1):

      http://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png

      With this one:

      http://2.bp.blogspot.com/-y7Bj5zpNXNg/Us2ClFy341I/AAAAAAAAF00/YiRy9v1Bvh0/s1600/searchBar.png

      And change the height to be of 30px.

      Delete
  43. thnx for the nice post ......... :) by the way, i have a question..... can you please help me how to add sub-menu to my navigation bar using html ? without changing my navigation bar ? plz suggest ..... see my navigation bar here is my blog :: www.pcfunkies.blogspot.in ....... Thank You !

    ReplyDelete
  44. Thank you for helping me so much! A biiiiig hug for you!

    ReplyDelete
  45. Thank u again :) It fit in perfectly :)
    I hav a doubt though, the search box searches only the labels and displays or some other method?
    because sometimes even if a post doesn't have the label it's displayed...

    ReplyDelete
    Replies
    1. It will show all posts containing that specific keyword that you're looking for. You're welcome!

      Delete
  46. I don't think I'm deleting the correct "red" code in the beginning. My HTML customization box stays all jumbled up on the right sidebar while my pages bar becomes a tiny bulleted list underneath the blog header. Also, any time I try to delete the "red" code an error comes up saying i need a quote for my code HTML attribute or I'm missing and "id".
    Please help me figure out exactly what to delete. Thanks.
    http://ashleyecameron.blogspot.com

    ReplyDelete