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.

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.

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:

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:

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.