Create a Drop Down List For any Horizontal Menu

create a drop down listA website's Header section which includes mainly the logo and navigation menu, is the region that attracts a visitor the most. It's the first section of your entire layout that catches reader attention. Therefore with time designers introduced non-traditional versions of drop down menus using Jquery and CSS3. Most of you probably know how to customize a menu but you often find it difficult to add Jquery effects to an existing menu, add CSS3 transitions for rollover effects and especially to turn a simple horizontal menu into a multi-level drop down menu. In order to understand the core basics of a Menu's HTML and CSS structure we will be publishing series of tutorials on this topic to make it extremely easy for most of you to create and design Menus by your own.

What's different about this Series?

In this series we will release some of our project codes for the first time. You wont find simple HTML menus here. You will learn how to create a fancy drop down menu, convert a horizontal menu into drop down, add jquery smooth sliding effect, add CSS3 animation effects and much more. If you were able to understand how a menu is structured and designed then you will surely become a better Web designer. These tutorials are not limited to Blogger and Wordpress users but can be implemented in any platform.

 

Navigation Menu Tutorials
2. Convert any Horizontal Menu into a Drop Down Menu
3. Add CSS3 Transitions To a Drop Down Menu - Coming Soon..
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
5. Add Jquery Slide Toggle Effect To a Drop Down Menu - Coming Soon..
6. Surprise...

 


Play with our HTML Editor

 

Finding the Menu Class and ID

In CSS every HTML tag is styled using either a class that starts with a dot(.) or an ID that starts with a hash (#). The only difference between a class and ID is that a class can be used multiple times but an ID can be used only once.

Note: You don't need to learn Code structure just give it a quick view to understand the basics. Your job is to look at your Menu code inside your blog or website and find out its class name. This is all you need to do.

Your Menu will consist of two parts i.e CSS (stylesheet) and HTML. Since we are designing a Menu so its structure would look slightly similar to this one:

CSS Part:

.navigation {
    width:1000px;
    margin:0 auto;
    height:34px;
}

.navigation ul {
    list-style:none;
    margin:0;
    padding:8px 0 0 0;       
}

.navigation ul li {
    float:left;
    color:#FFFFFF;
    font-size:14px;
    text-transform:uppercase;
    font-weight:bold;
}

.navigation ul li a {
    color:#FFFFFF;
    padding:8px 30px 10px 30px;
    border-right:1px solid #ffffff;
}

.navigation ul li a:hover {
    background:#060505;
    color:#ffffff;
}

In the above code the Menu has a class name called: .navigation . So in the HTML code which will cause the menu to appear the class will be called using the attribute class="navigation"

HTML Part:

<div class="navigation">
            <ul>
                <li ><a href="#">home</a></li>
                <li><a href="#">about us</a>
                    <ul>
                        <li><a href="#">Test 1</a>
                            <ul>
                            <li><a href="#">Test 1</a></li>
                            <li><a href="#">Test 2</a></li>
                            <li><a href="#">Test 3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Test 2</a>
                            <ul>
                            <li><a href="#">Test 1</a></li>
                            <li><a href="#">Test 2</a></li>
                            <li><a href="#">Test 3</a></li>
                            </ul>

                        </li>
                        <li><a href="#">Test 3</a></li>
                    </ul>
                </li>
                <li><a href="#">services</a></li>
                <li><a href="#">contact us</a></li>
                <li><a href="#"> Sitemap</a></li>
            </ul>
        </div>

 

This exact same concept is applied to all menus, only the class names and the code structure differs.

Adding the Drop Down Container

We Assume that your menu contains simple horizontally aligned links list and you do not have a Colum that drops vertically downwards on mouse hover. In order to create this column all you need to do is insert the following code inside the CSS part of your menu and it will play wonders!

.navigation li ul {
    position: absolute;
    left: -999em;
    width: 160px;
    margin: 19px 0 0 0;
    padding: 0;
}
.navigation li:hover ul {
    left: auto;
}

.navigation li li a {
    background: #C70D0D;
    width: 120px;
    color: #FFFFFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
   
}
.navigation li li a:hover {
    background: #060505;
    color: #FFFFFF
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
   border-bottom: 1px dotted #060505;
}
.navigation li ul ul {
    margin: -35px 0 0 145px;
}
.navigation li:hover ul ul {
    left: -999em;
}
.navigation li ul li:hover ul {
    left: auto;
}

Make these changes:

  • Replace navigation  with your Menu Class name
  • To change drop down container colour in active mode edit #C70D0D for background   and #FFFFFF for font colour
  • To change drop down container colour on mouse hover edit #060505for background and #FFFFFF for font colour

Creating Multi Level Drop Down List

You are all done with the design work. Now you just need to create the list in HTML part. Any tab or link in your menu will have this structure:

<li><a href="#">LINK TEXT</a> </li>

To add a drop down list to this tab all you need to do is to paste the following code just before the closing li tag. See below:

<li><a href="#">LINK TEXT</a>

<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a></li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>

</li>

To add a second drop down list within this vertical list, simply use the same concept. I will add the second vertical list after the tab: "FIRST LIST 2"

<li><a href="#">LINK TEXT</a>

<ul>
<li><a href="#">FIRST LIST 1</a></li>
<li><a href="#">FIRST LIST 2</a>

<ul>
<li><a href="#">SECOND LIST 1</a></li>
<li><a href="#">SECOND LIST 2</a></li>
<li><a href="#">SECOND LIST 3</a></li>
</ul>

 

</li>
<li><a href="#">FIRST LIST 3</a></li>
</ul>

</li>

 

Rest follows the same pattern.

Practice Now

You can use the following simple horizontal menus that we designed two years back. You need to add the effect precisely using our HTML editor for interesting practice:

Need help?

The above tutorial may seem a lot techy for those who just gave it a quick view but didn't try understanding it. This tutorial is extremely useful in clarifying several design concepts. A little careful read could turn you into a next passionate Web designer. If you needed any help please let me know. The objective behind this post was to enable you to customize your existing menus without discarding them. We hope this proves helpful for a great majority of new comers. Peace and blessings pals.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

34 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks a lot mohammed you are really great thanks man

    ReplyDelete
  2. Dear Mohammad please let me know how could i find the guest authors or article writers for my new blog which is about blogger and make money online.

    ReplyDelete
  3. my blog

    http://mylifecaree.blogspot.com/

    ReplyDelete
  4. @Mohammad Mustafa Ahmedzai- bro i really need your help for my blog.. If you can help me plz. BRO Give ur mail id so that i can mail u my problem. I know this is off topic but i really need ur help plz..

    ReplyDelete
  5. Nice tutorial muhammad bro but please explain the tags used in more elaborate manner. i know it will lengthen the post but will be useful for learning web designing properly.

    ReplyDelete
  6. Hello Mohammad,

    Great work on the tutorial for the drop down menu. I however have two problems that I cannot seem to figure out.

    1.) First there is a gap in between my header and the drop-down menu. I would like to have these together seamlessly.
    2.) The drop down does not seem to work on EI. How can I fix this.

    Some useful info that may help is: my blogger template is "Watermark" and my blog link is http://www.musictechhumorlife.com/

    Please help. Thank you so much.

    ReplyDelete
    Replies
    1. Hi, I've got the same issue with Watermark. Did you ever solve it?

      Delete
    2. I've got the same isse. Someone?

      Delete
  7. WELL I AM ON SURVEY FOR CONTENTENT AND THIS CODE IS USED FOR TROTORIAL IN 30,000
    SITES.IT'S THE SAME!!! by: samad@oniworld.in

    ReplyDelete
  8. Your contents force out your readers for commenting.
    Web Development

    ReplyDelete
  9. hi..how to add submenu in header..i already had dropdown menu in it but i want to make further category of it,,but i am unable to do so..help me!!

    ReplyDelete
  10. Hello,
    Thanx for info first of all.
    I am non-IT person from commerce background. And a beginner trying to develop the website on my own for my firm.
    Query-
    I used Horizontal Menu type #16 (Black colored rounded corner boxes) out of your list of 30 such types.
    Now, after adding this CSS & HTML codes for drop-down, drop-down appears, but at wrong place. I mean, I want the drop-down to appear just below third menu-tab from left. It is linked correctly by me. But when I hover the mouse on third tab, drop-down list appears right below first tab. :-(

    Secondly, there r total 5 vertical menus in the drop down list. On vertically 3rd, 4th & 5th menu tabs in drop-down list, there appears a solid line border below those tabs unlike 1st and second which seem ok. Reason may b 3rd, 4th and 5th tags contain little longer "Tab Names" which fit in 2 lines and not in one line. How to remove that border? Pls help..

    ReplyDelete
  11. Hi
    My drop down menu items seem to disappear/hide as soon as I try to click on them.
    Please check.

    http://mommybakesbrisbane.blogspot.com.au/

    ReplyDelete
    Replies
    1. Hi, I have the same issue. Did you ever solve? Thanks! trysomethingfun.blogspot.com

      Delete
  12. Hello,
    I'd like to ask - Is there any way to implement this on the default Blogger theme Menu? I really Like my current menu and just need it to drop down.

    ReplyDelete
  13. Thank you for your kind post. The article helped me too much. Great writing man. Please take a look on Horizontal Navigation Menu for Blogger
    Thank you sir.

    ReplyDelete
  14. Hello plz guide me in easiest way I am not getting any thing out of it, I have a beauty blog: sparklingmakeup.blogspot.com. I want to add drropdown menu in my pages list, but how to attach the related articles to them?????

    ReplyDelete
  15. Wow, thank you...

    I spent over 5 hours with this code.
    It works good, but the drop down menu was hidden behind the other elements on my blog. So i was looking for a code and found the

    z-index:500;

    Now the drop down menu is over the pictures and other elements!!

    Thank you, Mo!

    http://dkstyle.blogspot.com/

    ReplyDelete
  16. May be it is wonderful if drop down menu contain automatic recent posts based on labels like this tutorial http://www.threelas.com/2012/09/drop-down-menu-with-recent-posts-based.html

    ReplyDelete
  17. Really this is very useful post. I used this method in several of my blogs and thanks for update this post.
    My blog site- Watch Live Cricket Matches Online
    Thanks.

    ReplyDelete
  18. Dear Mohammad,

    This is sumit from Delhi, India. I want to know how to make list in google search of your own blog.

    A Example image is: http://i1137.photobucket.com/albums/n514/haridasbetaramdas/image001.png in this link. Please help & give me the tutorial.

    Thanks & Regards

    9:22 AM, December 01, 2012

    ReplyDelete
  19. Trying this out...thank you so much Mohammad! Love your blog.
    truecolorworld.com

    ReplyDelete
  20. Very nice Blog ,Good One Working - Love it
    http://TricksGator.blogspot.com

    ReplyDelete
  21. I already have a menu bar with dropdown menus. But, I want to see an indication on items which have a dropdown - like an arrow or something.. Plz hrlp :O

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

    ReplyDelete
  23. You got a very helpful weblog I've been right here reading through for about an hour or so. I'm the beginner as well as your achievement is extremely a lot a good motivation personally.
    Web development Company

    ReplyDelete
  24. This is very useful information sir.got a lot of confusion.Could you watch html coding of my blog ? I am trying it to my blog Android Roms,Tips,Tricks,Tech News .

    ReplyDelete