How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

Menus play an essential part on the web. They allow users to find their bearings and help them navigate your website. When designing menus, usability is the key. Beginners often struggle with the basics. In this tutorial I’m going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS. I will also dive a little bit into jQuery to add animations to your menu.

This tutorial assumes you have a basic knowledge of HTML and CSS. It’s recommended to use a CSS reset for consistency. I use the one by HTML5Doctor.

How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

[tut demo=”http://www.onextrapixel.com/examples/cool-menu/” download=”http://www.onextrapixel.com/examples/cool-menu/cool-menu.zip”]

The Basics

Let’s start with the basic HTML structure of the menu:

<ul id="coolMenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li><a href="#">Periher</a></li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>

A menu consists of an unordered list, and each list item contains a link with the text. Don’t create unnecessary divs. You don’t need any.

To add a sub menu simply nest another unordered list inside the item that’s going to have the sub menu, like this:

<ul id="coolMenu">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Mauricii</a></li>
    <li>
        <a href="#">Periher</a>
        <ul>
            <li><a href="#">Hellenico</a></li>
            <li><a href="#">Genere</a></li>
            <li><a href="#">Indulgentia</a></li>
        </ul>
    </li>
    <li><a href="#">Tyrio</a></li>
    <li><a href="#">Quicumque</a></li>
</ul>

As you can see, creating the structure is very simple. This is how it should look in your browser at this stage:

Stage 1

There are multiple ways to set up the CSS for a horizontal menu. After many years I found that this is the quickest and cleanest way to do it:

#coolMenu,
#coolMenu ul {
	list-style: none;
}
#coolMenu {
	float: left;
}
#coolMenu > li {
	float: left;
}
#coolMenu li a {
display: block;
	height: 2em;
	line-height: 2em;
	padding: 0 1.5em;
	text-decoration: none;
}
#coolMenu ul {
	position: absolute;
	display: none;
z-index: 999;
}
#coolMenu ul li a {
	width: 80px;
}
#coolMenu li:hover ul {
	display: block;
}
  • I decided to float the whole menu to contain it but you can use overflow hidden or even set a fixed width for the same purpose.
  • It is important to float the list elements rather than the links.
  • The links should be displayed as blocks, otherwise, they won’t behave as expected.
  • Absolute position the submenu and hide it to remove it from the regular flow and make it invisible. Also, set a high z-index to prevent the submenu from showing behind other elements.
  • Set a height for the link elements and the line-height equal to the height to center the text vertically. By specifying a fixed height instead of just using padding you avoid flickering problems with jQuery animations later on.
  • Even though it’s not necessary to set a fixed width for the submenu items, it’s always a good practice. It allows you to style them more consistently later on.
  • Notice that the hover state is set on the list element and not the link.

With all this set, the menu should be already working. Try opening it in your browser and hovering over the third option to show the sub menu.

Stage 2

Improving Usability

This step will cover how to style the menu with some basic CSS to make it more accessible.

/* Main menu
------------------------------------------*/
#coolMenu {
	font-family: Arial;
	font-size: 12px;
	background: #2f8be8;
}
#coolMenu > li > a {
	color: #fff;
	font-weight: bold;
}
#coolMenu > li:hover > a {
	background: #f09d28;
	color: #000;
}

/* Submenu
------------------------------------------*/
#coolMenu ul {
	background: #f09d28;
}
#coolMenu ul li a {
	color: #000;
}
#coolMenu ul li:hover a {
	background: #ffc97c;
}

Keep in mind this is very basic, and is meant to be just an example. You can style this however you want. The important thing to remember here is, as I mentioned before that the hover states, are styled in the list items and not the links.

This is how the menu looks so far:

Stage 3

Adding Animations

This final step is not necessary but it’ll help you add animations to your menu with simple jQuery. The first thing you need to do, of course, is to call the latest jQuery plugin on your website:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Now, let’s add a “noJS” class to the submenu to be able to unhook the hover css state in jQuery. This will also ensure that the menu will still work when javascript is disabled.

<li>
    <a href="#">Periher</a>
    <ul class="noJS">
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
</li>

You also need to add the class to the sub menu CSS hover state:

#coolMenu li:hover ul.noJS {
	display: block; 
}

Now that everything is set let’s add some magic:

$(function(){
	$('#coolMenu').find('> li').hover(function(){
		$(this).find('ul')
		.removeClass('noJS')
		.stop(true, true).slideToggle('fast');
	});
});

The code is pretty explanatory. The script finds the immediate children list items and adds a hover function. Inside the function it removes the “noJS” class since we’re using JavaScript, and then it tells the menu to slide down on hover and to slide up on un-hover. This is achieved with the slideToggle function. The stop function prevents the animation from repeating itself if we hover multiple times.

[tut demo=”http://www.onextrapixel.com/examples/cool-menu/” download=”http://www.onextrapixel.com/examples/cool-menu/cool-menu.zip”]

Further Notes

The menu should work in IE7+ and all other modern browsers. I didn’t bother to support IE6. I’m sure it could work with some fixes here and there but that’s not the purpose of this tutorial.

I encourage you to try some CSS3 properties to style your menu, the possibilities are almost endless. I suggest you use the Colorzilla gradient generator to create your gradients.

I look forward to see what you can do.

Cedric Ruiz is a freelance graphic and web designer/developer with a passion for computers and technology. He actually studied 3D animation but took a totally different path. He needs to learn something new everyday and he loves challenges and teaching people new skills.

Comments

    • Paginas,
    • June 3, 2011
    / Reply

    Navigation menus are the most important element one should pay attention when designing a website. Web-developers can create user-friendly horizontal or vertical navigation menus using CSS. Javascript makes it possible to create more interactive, more responsive and more flexible navigation to any website.

    • Joe,
    • June 4, 2011
    / Reply

    By using css transitions you could achieve that scrolling effect as well. No 31,31 KB jquery-include needed

      • Cedric Ruiz,
      • June 4, 2011
      / Reply

      Of course you can, but with jQuery it’ll also work on browsers that don’t support css transitions.

    • jlafay,
    • June 4, 2011
    / Reply

    When I tried the example, the submenu is showing to the right underneath the main menu item. I’m new to css so I’m not sure where and how to fix it. Is there something I’m missing that maybe didn’t make to the blog post?

      • Cedric Ruiz,
      • June 4, 2011
      / Reply

      What browser are you using?
      I’m not sure what could be the problem but make sure the submenu “#coolMenu ul” has “position: absolute”.

      1. / Reply

        I have the same issue, in ALL browsers (except IE; I don’t have IE installed). I even tried copying and pasting the code, linking and un-linking the stylesheet, but the result is still the same. The sub menu is not positioned directly underneath it’s parent, but to the right of it, indented slightly.

        Here’s a screenshot of what it looks like in chrome: http://ow.ly/i/cxv4

          • Cedric Ruiz,
          • June 6, 2011
          / Reply

          Ok, I found the problem. This is happening because you’re not using the css reset.
          I recommend always using a reset for consistency across browsers.
          But, if you don’t want to use it or you’re using your own css reset and it’s still happening just add “padding: 0;” to “#coolMenu ul” and it should work fine.

          1. /

            Thanks! Yeah I missed the line about the reset!

            • john,
            • October 24, 2011
            /

            two basic questions
            my animation part doesn’t work
            so where does the code beginning with $(function(){ go?
            in a separate js folder? is so what do you name it?
            and where exactly does the padding: 0 referred to above go?
            there are a couple of sections which say #coolmenu ul

          2. /

            I am also having almost the same problem., the submenu of the drop down list is align with the page., how can i solved this.,thanks.,

            here’s my blog http://f1-gethelp.blogspot.com/

            You’re tutorial is really great!

          3. /

            I am also having almost the same problem., the submenu of the drop down list is NOT align with the page., how can i solved this.,thanks.,

            here’s my blog http://f1-gethelp.blogspot.com/

            You’re tutorial is really great!

    • Mickey,
    • June 5, 2011
    / Reply

    Hello.

    Very nice tutorial! Thank You!

    I have to say some words, though :)

    I see more and more posts on usability of UI and one of the critics about menu is that it should not be “nervous”, meaning – it should not open sub-menu on immediate “hover”, but wait some time, because user may unintentionally hover the menu with mouse many times. The same is for “blur”.

    So, as an usability point – it would be “correct” to add some delay before opening the menu and closing it.

    Just some thought.

      • Cedric Ruiz,
      • June 5, 2011
      / Reply

      You can use the hoverIntent plugin.

        • Mickey,
        • June 5, 2011
        / Reply

        Yes, I was referring to something like that :)

        Thank You.

  1. / Reply

    Yes, I was learning to something likeit

  2. / Reply

    Good tutorial, but its not working in IE6.
    I think IE6 doesn’t support child selectors.

    1. / Reply

      The child selectors are easily swappable for ul li ul li styles etc so shouldn’t be a barrier to getting it working on IE6. However, the li:hover will not function in IE6 and this requires a bit more of a workaround. You can use JavaScript to add a hover class (such as li.hover) to the li’s on the mouseover event and remove it on the mouseout even. This way the styling will remain concise and the functionality consistent across all browsers.

      Finally, if you want more nice usability tweaks such as delaying hiding/showing and also widening the sensitive areas of the menu so they don’t disappear as soon as you roll slightly off them I have always found the Uvumi dropdown menu easy to implement using mootools. The advantage of this particular option is the ease of styling and the fact that the html remains clean and valid.

      1. / Reply

        try visiting this site this might help you., http://www.zakyri.com/2012/06/how-to-create-drop-down-list-on-your_10.html

    2. / Reply

      try visiting this site http://www.zakyri.com/2012/06/how-to-create-drop-down-list-on-your_10.html

      this might help you.,

  3. / Reply

    Thanks for sharing the fundamentals. It’s easy to find hundreds of downloadable templates for cool looking dropdown menus, but to actually know how it operates and what’s involved in its development is a much better resource.

    • Rana Mukherjee,
    • June 6, 2011
    / Reply

    Nice

  4. / Reply

    I always find drop downs a little tricky especially when trying to get them to look and work the same in IE6. I have a HTML/CSS driven drop down I use normally with an alternative stylesheet for IE6. However the other day it was conflicting with my J Query, I might give this a try hopefully it works perfectly! I think adding J Query to your navigation always makes it look nicer and adds a little bit more animation to the rollover states.

    • Sam,
    • July 1, 2011
    / Reply

    I am trying to add a submenu to my menu. I have tried adding the ul inside of the ul but the only thing that
    does is display the two submenu items visible below the main menu item. I tries using hide in the unordered
    list but that hid the whole horizontal menu bar, not the two submenu items. I am sure it is a css styling problem I just don’t know what it is. The problem I am running accross with instruction on this is that I already have a menu bar. I just want to add a drop donw to one of the blocks because I have 2 different pages I need to go to. All the instruction I am running across is building a whole menu bar which I already have. Any ideas?

    • Jody,
    • August 4, 2011
    / Reply

    Hi,

    I am trying to add vertical menu for my website. I have used your horizonal menu bar and it has worked well. I need a vertical bar which does not use javascript. Can you direct me to right place?

    -jody

      • Mickey,
      • August 4, 2011
      / Reply

      Hi, Jody

      This is my example of vertical menu based on this tutorial: http://jsfiddle.net/mickeyvip/tRbLv/

      Hope it helps

  5. / Reply

    Hi,
    Very nice. I like the smooth effects of the jquery. Has anyone gotten this to work in ie6? Also, anyone successful in adding a submenu to the first submenu? Like to keep building on this terrific base. Thanks for contributing.

    Lynne

    • praveen,
    • September 21, 2011
    / Reply

    thank you!

  6. / Reply

    I can fix the IE6 finally…
    change the css as below
    #coolMenu {
    float: left;
    width: auto;
    }
    #coolMenu li {
    width: 89px;
    float: left;
    }
    #coolMenu > li {
    float: left;
    width: 89px;
    }

    1. / Reply

      can u just send me entire css code …so that it can work in ie as well other browsers..plz help me

    • Samson,
    • October 13, 2011
    / Reply

    Great tutorial. Easy to follow along, and to understand. Kudos!

    • E,
    • October 29, 2011
    / Reply

    Hello, thanks for your reply via email and Ive unlocked my site http://www.elaineckt.blogspot.com
    I cant seem to move the navigation hover bar to the middle.
    Even after coding , it doesnt work!!

    My html goes:

    #coolMenu,
    #coolMenu ul {
    list-style: none;
    }

    #coolMenu {
    float: left;
    }

    #coolMenu > li {
    float: left;
    }

    #coolMenu li a {
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;

    }
    #coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
    padding: 0;
    }

    #coolMenu ul li a {
    width: 80px;
    }
    #coolMenu li:hover ul {
    display: block;
    }

    /* Main menu
    ——————————————*/
    #coolMenu {
    font-family: Arial;
    font-size: 16px;
    background: #EF0B0B;
    position: center;
    }
    #coolMenu > li > a {
    font-weight: bold;
    }
    #coolMenu > li:hover > a {
    background: #EF0B0B;
    color: #000;
    position: center;
    }

    text-align: center;

    /* Submenu
    ——————————————*/
    #coolMenu ul {
    background: #EF0B0B;
    }
    #coolMenu ul li a {
    color: #000;
    }
    #coolMenu ul li:hover a {
    background: #EF0B0B;
    }

    Home
    About Us

    Services

    Test
    Test
    Test

    Incorporation
    Contact Us

    Help will be greatly appreciated :)

    • Jennifer,
    • November 29, 2011
    / Reply

    Hi there,
    I chose not to include the reset.css and added the “padding: 0” instead, which fixed the alignment of the submenu, and love the way this functions in Firefox, but I cannot get it to work in IE (9).

    here’s where it’s at if you have any suggestions: http://www.aapca3.org

    thank you!

    1. / Reply

      if you got the answer for your question…plz post the css code here…i need help :)

      • Manjunath,
      • February 23, 2013
      / Reply

      Hi,this is Manjunath,i wud like to know few codings of HTML designing like an Professional.
      Example like an Official AUDI(4-Rings Car Website).

    • Joey,
    • December 4, 2011
    / Reply

    Hello Sir,

    I wanted to thank you for this article, it was very helpful as it helped me fix issues that I encountered from my understanding of drop down menus.

    I used to have position:relative on the coolmenu li, and position:absolute on the drop down menu. This created an issue where adding long texts in the drop down would not let the second menu to expand, but instead the text will break on the next line. Also, after using position absolute, I had to use a negative margin instead of the positioning property to style the menu according to my needs.

    So an advise for people who may have made the same mistake as I, do not use position:relative on the first li in your drop down navigation lists. It prevents the drop down menu to resize on long text/sentences.

    Also, am not sure if it was caused by the position:relative but, my drop down menu was going transparent on IE 7 before I removed the relative positioning.

    Thanks again for this post.

    • deep4ut,
    • December 21, 2011
    / Reply

    thanks for sharing

    • Luca,
    • January 12, 2012
    / Reply

    Hi,

    I am looking for how to add a submenu in my website.
    I saw your directions and they are really helpful, but I want more help…

    At first, I set up the HTML.
    My code was like this







    And then, accordance with your instructions I changed to







    So, as you can see I add to “but2” the submenu “but8” and “but9”.

    Now, the CSS is like this
    #menu{
    background:url(images/menu_bg.jpg) top left no-repeat;
    width:988px;
    height:46px;
    float:left;
    / float:none;
    margin:40px 0 0 0;
    / margin:40px 0 0 3px;
    padding:2px 0 0 4px;
    }
    #menu ul{
    background:url(images/end_menu.gif) top right no-repeat;
    overflow:hidden;
    float:left;
    padding:0 3px 0 0;
    }
    #menu li{
    display:inline;
    list-style-type:none;
    }
    ul#menu_nav
    {
    position:relative;
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
    }
    ul#menu_nav li {float: left;
    margin: 0; padding: 0;
    border-right: 1px solid #555;}

    ul#menu_nav li a.button
    {
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
    }
    ul#menu_nav li a:hover {
    background-color:#F7F7F7;
    color:#000099;
    border-top:1px solid #CCCCCC;
    }

    ul#menu_nav li span{
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0; top:25px;
    display: none;
    width: 790px;
    background: #F7F7F7;
    color: #fff;
    }
    ul#menu_nav li:hover span { display: block; }
    ul#menu_nav li span a { display: inline; }
    ul#menu_nav li span a:hover {text-decoration: underline;}
    #menu a{
    display:block;
    float:left;
    }
    .but1{background:url(images/but1.jpg) top left no-repeat;}
    .but2{background:url(images/but2.jpg) top left no-repeat;}
    .but3{background:url(images/but3.jpg) top left no-repeat;}
    .but4{background:url(images/but4.jpg) top left no-repeat;}
    .but5{background:url(images/but5.jpg) top left no-repeat;}
    .but6{background:url(images/but6.jpg) top left no-repeat;}
    .but7{background:url(images/but7.jpg) top left no-repeat;}
    #menu a:hover, .active{
    background-position:bottom left
    }

    So, I don’t know WHAT I must ADD to CSS code in order the submenu to work normally.

    Can you help me please to find a solution to my problem?
    Thank you very much in advance!

    • Gil,
    • January 19, 2012
    / Reply

    Hi. great tutorial. I don’t know much about CSS and this helped me understand it, and it’s excatly what im looking for. I do have an issue an is that , when I hover over the MAIN MENU LINK the submenu dont appear. They are always showing up no matter if you hover over a link or click or do nothing. Also just below the main there is a div for the rest of the content ect. The sub menu is showing but behind that so you can’t really see it

    • Arjun,
    • January 23, 2012
    / Reply

    hi Cedric,
    You have done a cool job. I added this menu to my own site.
    Thanks,

    • CSJ,
    • January 26, 2012
    / Reply

    Great article! But if I’m not mistaken, the “display: block” is not needed, as that’s default and you’ve not set “display: inline” on any of the elements.

    • CSJ,
    • January 26, 2012
    / Reply

    Sorry, my mistake. Inline is default.

    • ozogla,
    • January 28, 2012
    / Reply

    Hi Cedric Ruiz,

    Thanks for the great post. I tried a submenu to the submenu but it didnt work. Please can you help me on this. Thanks.

      • Mike S,
      • June 3, 2013
      / Reply

      I also tried a submenu to the submenu but it didnt work. Please can you help me on this. Thanks.

    • Hawk,
    • January 31, 2012
    / Reply

    Don’t forget, you can easily convert this into a tab menu by rounding the corners using CSS 3:

    border-top-left-radius:5px;
    border-top-right-radius:5px;

    1. / Reply

      Where exactly would the rounded corners code get placed and where do I drop the JS for animation effect?

    • Goran,
    • February 1, 2012
    / Reply

    Hi,

    First of all thank you for this excellent post.

    I’m just wondering how you can add the possibility to highlight active (selected) menu item tab on first level?

    Thank you in advance.

    • Brian Borup,
    • February 3, 2012
    / Reply

    Great tutorial. Just what I needed.

    What I need to change in the CSS, to make the submenu aligned to the right, instead of to the left side of the main menu?

    • Brian Borup,
    • February 3, 2012
    / Reply

    Oh, right-alignment was easy enough.

    Just alter these sections of the CSS:

    #coolMenu > li {
    float: right;
    position:relative; /* NEW */
    }

    #coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
    right: 1px; /* NEW */
    }

    • Greg,
    • February 7, 2012
    / Reply

    With newer versions of jQuery, you should use:

    $(function(){
    $(‘#coolMenu’).child(‘li’).hover(function(){
    $(this).find(‘ul’)
    .removeClass(‘noJS’)
    .stop(true, true).slideToggle(‘fast’);
    });
    });

      • Greg,
      • February 7, 2012
      / Reply

      Correction to myself. I was having a problem of this setup causing a repeating flipping of the toggle when hovering over the menu. I eventually had to do this:

      Remove the display so that default is to allow it to display
      #coolMenu ul {
      position: absolute;

      z-index: 999;
      }

      In the script:
      $(function(){
      $(‘#coolMenu’).children().hover(function(){
      $(this).children(‘ul’)
      .stop(true, true).slideToggle(‘slow’);
      });
      $(‘#coolMenu > li’).children(‘ul’).toggle();

      });
      //This does the same thing, but first toggles the display off naturally. Then the first toggle activated is “on”.

        • Jeff,
        • February 13, 2012
        / Reply

        I was having the same problem with the repeating toggle, this fixed it. Thanks!

        • Einbjørn Vestøl,
        • April 6, 2012
        / Reply

        Thanks Greg, this indeed is a solution for jQuery 1.7.1! I know this post is over a year old but I hope Cedric finds time to update it.

        Thanks Greg and thanks Cedric!

    • ajheart,
    • February 21, 2012
    / Reply

    Thanks for the tutorial! You made it very easy to get from A to B and I really appreciate it. One question – how would you configure the code to utilize a sub-level in a list? I mean, make another drop-down FROM a drop-down?

    Thanks!

    • ajheart,
    • February 21, 2012
    / Reply

    I’m having an issue of a blank space before each menu item, like it’s expecting to have a bullet there and it’s invisible. This wouldn’t be a problem, but it offsets my list to the right about 30px. Any ideas how to fix this? Thanks!

      • ajheart,
      • February 21, 2012
      / Reply

      Nevermind – fixed
      http://www.alistapart.com/articles/taminglists/

    • Henrik,
    • March 8, 2012
    / Reply

    Hi, thanks for this awesome tutorial!
    But I have one problem. I want the dropdown menu to drop down to the left side instead of the right side of the main menu point. So that the dropdown menu will be aligned with the last letter in my main menu. How do I do that? I would really appreciate if someone could help me on this! Thanks.

      • Karthik M R,
      • June 5, 2012
      / Reply

      Just add padding-left: 0px; in #coolMenu ul
      And its good to go!

    • Henrik,
    • March 8, 2012
    / Reply

    Hi, I love this tutorial and it was working great, but I don’t have IE on my mac. And when I checked IE8 and 9 the menu was suddenly not aligned horizontally but vertically instead! How can I change that, so it will work in Explorer?

    Thanks for helping.

    1. / Reply

      if you find that ie bug…plz help me

    • Gurpreet Singh,
    • March 9, 2012
    / Reply

    Its Good And very helpful for me….

    • Henrik,
    • March 11, 2012
    / Reply

    Anyone who can help me with this?

    • mcmwhfy,
    • March 15, 2012
    / Reply

    Awesome tutorial, thank’s.

    I modified a little bit in order to work for my html, maybe will help someoane:

    function mainMenu(){
    $(‘ul#ID’).find(‘> li’).hover(function(){
    $(this).find(‘ul’)
    .stop(true, true)
    .slideDown(‘slow’);
    }, function(){ $(this).find(‘ul’).hide(); });
    };

    and in css I added only this:

    ul#IDl{
    display:none;
    }

  7. / Reply

    Thanks for helping

  8. / Reply

    So I got through the first couple of steps fine. I am self taught, so please excuse my ignorance….
    WHERE do you put the css code? on the same page? If I copy and paste, all I get are the words, not any action. Please help, I am frustrated beyond belief :( thank you!

    • 91_91,
    • March 30, 2012
    / Reply

    thanks for this nice stuff Ruiz. it’s working nicely on firefox 2.0 but gets vertical on ie 5. what to do for ie 5

  9. / Reply

    WOW! that is the first thing I can say. I am still learning HTML and CSS and I must say your tutorial is very straight forward. It is very clear that even a amateur like me would understand it.

    @miss mirabai: yes you can put it on the same file, if not then declare it and put it on a separate file.

    • Ezekiel,
    • April 12, 2012
    / Reply

    Great now I finally have a drop down menu for my site! If you are looking for a vertical menu you need only change one thing:
    (Original code):
    #coolMenu ul {
    position: absolute;
    display: none;
    z-index: 999;
    }

    What to change this to for a vertical menu:
    #coolMenu ul {
    position: left;
    display: none;
    z-index: 999;
    }

    notice how absolute is now changed to left. This will give you a vertical menu!

    • Jason,
    • April 16, 2012
    / Reply

    Anyone figure out how to get sub menu inside sub menu to work yet?

    Thanks in advance!

    • Halee,
    • April 17, 2012
    / Reply

    Hi, thanks for the code worked great, but is there anyway I could make the sup menu have a different line hight then the main menu bar?

    • Halee,
    • April 17, 2012
    / Reply

    Hi, thanks for the code, it worked great, but is there any way to make my sub menu have a different line hight then then main menu bar?

      • Jason,
      • April 18, 2012
      / Reply

      Hi Halee,

      I’m not sure exactly what you are going for but try this:

      The last few lines of the code look like this
      #coolMenu ul li:hover a {
      background: #ffa930;

      Simply add in height: 20px; /* the number can be what ever height you want!*/

      So it would read:

      #coolMenu ul li:hover a {
      background: #ffa930;
      height: 20px;

      -Good Luck

      • Ali,
      • April 25, 2012
      / Reply

      Halee,

      Please provide the code Horizontal code (either in single file or seperate file ) for me so that it should work…Please help me..it is very urgent. Your help will appreciated…

    • Halee,
    • April 20, 2012
    / Reply

    Thanks fir messaging me back, but i did figure it out, I add the height and line hight to make my drop down menu boxes smaller then the boxes for the main menu bar

    #coolMenu ul li a {
    height: 2.4em;
    line-height: 2.4em;
    width: 80px

    • Ali,
    • April 25, 2012
    / Reply

    Horizontal drop menu is not working for me. Please send me the seperate file and steps to execute this also. I new to this technology. Email me at maabca28@gmail.com

  10. / Reply

    Really good tutorial about horizontal drop down css.

  11. / Reply

    Menu bar is the standard feature of most windows applications. The main purpose of the menus is for easy navigation and control of an application. Some of the most common menu items are File, Edit, View, Tools, Help and more. Each item on the main menu bar also provides a list of options or in the form of a pull-down menu. When you create a Visual Basic 6 program, you need not include as many menu items as a full fledge Windows application such as Microsoft Words.

    http://www.handycss.com/css-menus/creating-menu-with-sub-menu-below/

    • santosh,
    • May 4, 2012
    / Reply

    this example of horizontal drop down menu is working in only firefox browser but not in internet explorer

    • santosh,
    • May 7, 2012
    / Reply

    how to give hyper links for navigation to different page in Hellenico

    • farshad,
    • May 19, 2012
    / Reply

    thank you

    • Matt,
    • May 24, 2012
    / Reply

    Thanks!

  12. / Reply

    hello…i used your code for creating horizontal drop down list..it is very nice but the problem is that, it is not working in Internet Explorer..plz give me a solution i need urgently..plz

  13. / Reply

    thank you for nice and helpful tip and tricks

  14. / Reply

    Hey Cedric!

    Much appreciate the effort! Easy, well explained and clean. That’s quite how tutorials should be. Good work!

    Best regards,
    Maksim

  15. / Reply

    Great tutorial! Pretty easy to follow :)

    I have a screen shot of it customised : http://grab.by/dYYQ
    But I do have one problem with it, it doesn’t display properly in IE, I get : http://grab.by/dYZ0. Is there any way around this?

    Many thanks :)

    • Karthik M R,
    • June 5, 2012
    / Reply

    Thnx for this wonderful tutorial right from the scratch to the high end!

    • ankit saxena,
    • June 6, 2012
    / Reply

    hello Sir…i am a student.I am learning to create web page at home.So can u pleast tell me how and where to use css and how to call css.Or reffer me some sites through which i can copy code and understand…
    please….

    1. / Reply

      You can use this to learn about css:
      http://www.w3schools.com/css/default.asp

    • cotinga,
    • June 6, 2012
    / Reply

    oooh!!!! am realy thank you!!! to help me doing my homework!!!!!!@!!

    • Wesley Burden,
    • June 7, 2012
    / Reply

    Wicked simple menu script. Just what I was after, thanks!

  16. / Reply

    good effort brother … :)

  17. / Reply

    Regarding my coment about the IE problem: this screen shot: http://grab.by/dYZ0
    If any else gets this problem, it can be simply fixed by adding this code;

    #nav ul li
    {
    clear:both;
    }

    between #nav ul and #nav ul li a

  18. / Reply

    Working fine. Thanks for sharing.

  19. / Reply

    Incredible, fantastic tutorials, works like a charm ,
    thanks for the tut.
    -sam-

    • sachika,
    • July 1, 2012
    / Reply

    THANKS.

    • freckles,
    • July 7, 2012
    / Reply

    This menu is awesome and the code is so simple. Is there a simple way to horizontally center the top menu? And flip the last one so it is contained within the frame?

    • Michelle,
    • July 11, 2012
    / Reply

    Can this be made to flyout more than one level?

  20. / Reply

    Very interesting! As someone who’s been AWOL from web coding for a few years, thanks for putting together a very informative article! I can see I’ve got a long way to go to proficiency, but being able to see the results so quickly gives me confidence. Thanks again!

  21. / Reply

    Well, this was the cat’s pajamas!

    I used the tutorial and subsequent files to create a nice (for me anyway) menu with both left and right floating sections.

    I freely admit that the coding is pretty ‘yard sale’ but I think it is fairly bug free.

    The sample menu can be seen here: http://www.bcw.se/menu_test/

    Tack så mycket!

  22. Nice dropdown menu……. Thanks……………

  23. / Reply

    This was such a perfect example and tutorial, I applaud you for making it so nicely! I don’t usually comment on things of this nature, but I felt it was only just if I did on this one! Excellent job!

    • shridhara,
    • August 22, 2012
    / Reply

    Thank You carry on………………..

    • Sai Pratap Reddy M,
    • August 23, 2012
    / Reply

    Hi,
    Nice tutorial..i learn lot of things from this tutorial.
    Thank you….

    • Jeremy,
    • August 31, 2012
    / Reply

    Hi,

    I know I’m late finding this post, but I really enjoyed it and wanted to thank you for taking the time to explain all of this. You explained everything very well—a lot like a professional tech book. Thank you!

    • Rahul Agrawal,
    • September 24, 2012
    / Reply

    Hi,

    I wanted to know how to create a submenu which open not below but sideways. Above example contain a horizontal bar and dropdown is vertical just below it. What to do if we have vertical menu and want to open another vertical one not below but sideways.

    • prince,
    • September 30, 2012
    / Reply

    thanks a lot just because of you i made best drop down list soooooooooooo thank youuuuuuuuuuu soooooooooooooo much!!!!!!!!!

  24. / Reply

    how do you set your bar in the center

    • priya,
    • October 7, 2012
    / Reply

    i still dnt get hw to do the horizontal menu so confusing!!!!!!!!!!!

    • Atul,
    • October 8, 2012
    / Reply

    I have used this code however mine becomes vertical and aligned on the left. How do I fix it ?

  25. / Reply

    This is perfect – just what I was looking for! One teeny issue, though – when the name of the sub menu has a space in it, it gets thrown down a level, so that the item below is written over by the second word of the item above. Any ideas…?

    • Tim,
    • November 3, 2012
    / Reply

    For some reason when I add the JQuery script the drop down menu is already fully dropped down when the page is displayed. Then when I hover the mouse over the li component the menu folds up! Move the mouse away from the li element and it drops down again. It’s like the exact opposite of what should happen!

    When I hover the mouse over the drop down ul list elements themselves, the menu folds up and down, up and down, up and down, infinitely.

      • CornelS,
      • March 24, 2013
      / Reply

      I have the same problem, did you solve it?

      • Sandro,
      • August 8, 2013
      / Reply

      Just remove in css this code:

      #coolMenu li:hover ul {
      display: block;
      }

    • Tim,
    • November 7, 2012
    / Reply

    Solved (above query). My bad, I forgot to add the ‘noJS’ class to the #coolMenu li:hover ul CSS element to invoke it only when Javascript is unsupported.

    #coolMenu li:hover ul.noJS {
    display: block;
    }

    • Tim,
    • November 9, 2012
    / Reply

    For devices like the Apple iPad, is there any way of being able to fold the menu back up again by pressing anywhere outside of the menu (elsewhere on the screen), or on the item at the top of the tree to fold it back up?

    Currently on the iPad it takes one press on a menu item to fold it down, but then it remains folded down until you press a menu item, regardless of whether you wanted to or not (for example when you’re just exploring).

    Thanks

    • krups,
    • November 10, 2012
    / Reply

    when I select child – menu ,Its parent always highlited, Please help on this. its urgent.

    • rajeev,
    • November 14, 2012
    / Reply

    Its not working on chrome.Its works in IE7

    • Aldo,
    • November 16, 2012
    / Reply

    Thanks!!!, this saved my life :p

  26. / Reply

    Nice article. i like it.

  27. / Reply

    really nice tutorial…………appreciate it

    • tonpet,
    • December 19, 2012
    / Reply

    Hi,

    this not work with IE9 quirks mode. Have a fix or somthing simillar.

    BR,

    • yogesh,
    • January 2, 2013
    / Reply

    Hi,
    i want to different background color to whole menu,when the mouse is hover on the perticular menu type than background color is changed. when menu is select than that menu is not changed it display same as other that means “active” attribute is not work. i want basically selected menu color is different from other
    Thanks for Help me.

    • jenny,
    • January 20, 2013
    / Reply

    i have it displaying horizontal on IE8, but when i mouseover the sub menus don’t work properly. help.

    also, where do i put the jquery code at? still confused about where that goes.

      • MAIL,
      • August 3, 2013
      / Reply

      Mouse over will not work properly in IE7+ rather than Google Chrome /Mozilla fire fox. either use JavaScript menu or include jquery to the existing code.

      Simple jquery horizontal menu with hover effect. Source code and demo given here. it may help you.
      http://www.freemenu.info/2013/05/js-menu.html

  28. / Reply

    Thanks for sharing the fundamentals. It’s easy to find hundreds of downloadable templates for cool looking dropdown menus, but to actually know how it operates and what’s involved in its development is a much better resource.

    • Liam,
    • February 24, 2013
    / Reply

    Hi, would it be possible for this to happen with the menu:

    You click on the first one, let’s call it Home.

    The Home button remains lit up in the selection color.

    And so on for each page, so the reader can easily tell what page they’re on. Can anyone help me? Thanks!

    • Kewal,
    • March 1, 2013
    / Reply

    Best Drop down Ever.

    • Pallavi,
    • March 4, 2013
    / Reply

    Hello.
    Thanks for your tutorial. It is helpful.
    I am facing a problem in the menu. When the drop down of the menu opens, I can see only 3-4 list options. I have to reduce the size of the options to fit in all the options in the block.
    Can you tell me how to increase the size of the block where I can comfortably add more options and all of them can be displayed.

    Awaiting Reply.

  29. / Reply

    How To Slide Up The Menu? I wanna put the menu floating on the bottom of the page.

  30. / Reply

    Great..
    thank’s for the script..

  31. / Reply

    Very nice and useful example. Thanks for tutorial.

    • Sumon Bappi,
    • July 3, 2013
    / Reply

    nice work, it helped me

    • MAIL,
    • July 17, 2013
    / Reply

    Vertical menus are better but in case of drop down menus proper drop down area to be kept otherwise the entire article will slide. Still you want the vertical drop down menu with source code:
    http://www.freemenu.info/2013/05/js-hmenu.html

    • Jayboy,
    • July 25, 2013
    / Reply

    thank you very much i made a submenu to my exercises tnx a lot…

    • chris,
    • August 7, 2013
    / Reply

    sorry mine did not work

    • Rajni Nair,
    • August 15, 2013
    / Reply

    Thanks a ton…. indeed very useful information…

  32. / Reply

    I would like to make a table with a drop down for showing eligibility to get a visa. How do I do this?
    Sorry I’m a beginner

    • Israel,
    • September 7, 2013
    / Reply

    I’m having an issue with the way the menu enlarges the selection when hovering over a dropdown to get a sub menu. It makes my whole bar wider, which makes it move into the next line down when opening a menu.

    Also, the dropdown box isn’t consolidated to just the dropdown list, it covers the whole bar

    This is what I’ve got going on.

    http://jsbin.com/oKUKIk/1/

    • Wilcorz Wilcorz,
    • October 20, 2013
    / Reply

    How do you get the drop down to work in Frames? Frame one holds the Horizontal menu and frame two holds the content.

    • Richard,
    • November 4, 2013
    / Reply

    Thanks for the great code. I have the same issue as someone else but I didn’t see a solution.
    When a single navigation item runs over two lines the second line overlaps the nav item below. If I make the spacing between the items larger it aligns to the top row (of the two line nav item) so the gap is much smaller. This means the spacing looks uneven.
    Does anyone know a fix so the alignment is eqidistant even if the nav items are one or two lines?

    • Spartan,
    • May 1, 2014
    / Reply

    Thanks for this article. I am stuck at one place. I want another dropdown to be shown from like when i hover on ‘Genere’ then another dropdown should get list out. Could you please help me in this.

    • Kingkrikkit (Kristopher),
    • May 15, 2014
    / Reply

    Is there any current solution for using this in a responsive layout? I have successfully implemented this design but when viewed on a smaller window I want the menu to collapse back to vertical layout, but I need the dropdown to almost turn into an accordion on the tap instead of initiating a hovering menu.

Leave a Reply

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

Deals