Horizontal navigation bar tutorial

In this tutorial I will show you how to create a horizontal navigation bar in HTML5 and CSS3, in a fwe simple steps.


Step #1: The navbar’s HTML

Our HTML is, of course, a nested list of links


Step #2: Clean up the list of links

Step #3: Add height and background to the navbar

Step #4: Prepare the drop-downs

The drop-downs will be positioned relative to the navbar’s main menu items, so we will give main items position: relative:

Step #5: Style the main items more

Step #6: Style the links

Step 7: center links vertically

The next lines are vital for centering the text vertically on the navbar

Step #8: The drop-downs

The display: none; line hides drop-downs by defaults

Step #9: Show the drop-downs on hover

Step #10: Style the drop-down links

And we are done! Here is a JSFiddle with my end result.