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

The Basics

 

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

1 2 3 4 5 6 7

<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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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:


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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

#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.

 

Improving Usability

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

/* 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.