Creating a Horizontal CSS List Menu by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | 21 February 2012 Have questions? Discuss this HTML tutorial with others on the forums. (https://www.kirupa.com/forum/showthread.php?371050-Tutorial-Creating-a-Horizontal-CSS-List-Menu) There really are only two ways to arrange links inside a menu. One way is vertically as described in a different tutorial (https://www.kirupa.com/html5/creating_a_vertical_css_list_menu.htm). The other way is horizontally: [Image: horizontal menu] (https://www.kirupa.com/html5/images/horizontal_menu.png) [ here is a live version (https://www.kirupa.com/html5/examples/horizontal_menu.htm) of this that you can play with ] In this tutorial, you will learn how to go from a default vertical list to a menu that arranges its contents horizontally. Along the way, you will also learn how to make that menu look beautiful. Let's get started. Specifying the HTML First, we need to actually define our menu. This is done by using the ul and li tags. I am going to throw in the nav tag as well for some good luck. Go ahead and open an HTML5 document you wish to create this menu in. If you do not have an HTML5 document, simply create a new one with the following markup as a starting point: We will create our menu in-between the opening and closing body tags, so go ahead and add the following markup just below your opening tag: If you preview what you have so far, you will see something that looks as follows: [Image: eeeeewwwwwwww] (https://www.kirupa.com/html5/images/mymenu.png) [ plain. vertical. epic fail ] The reason for why is simple. Your "horizontal" menu is basically made up of an unordered list (ul) containing three list items (li): By default, a list in HTML is always vertical. The way you turn a vertical list into a horizontal one is by using very little CSS to modify how it lays itself out. Let's look at how to do that next. There is a nav tag in my soup! You may have noticed the nav tag in our markup. This tag is one of the new elements introduced by HTML5, and its primary purpose is to add more semantic meaning to your document by declaring its contents as something primarily used for navigation purposes. You and I will probably not find a use for it, but search engines and possibly screen readers would find this tag useful. For the SEO and accessibility benefits alone, I strongly encourage you to wrap your navigation elements around nav tags. To ensure the nav tag works predictably in older browsers (primarily IE), look into using the html5shiv script (http://code.google.com/p/html5shiv/). If you don't and you care about people using versions of IE older than version 9, bad things will happen....maybe. Modifying the CSS Right now, our menu isn't really much to write home about. It looks really boring. Worse, it doesn't even live up to its dream of becoming horizontal. Let's fix all of that in this section and then move on to making it look attractive. Oh, How the Mighty Fall First up, let's put the "horizontal" in our horizontal menu and teach our smug (possibly liberal-arts educated) vertical menu a lesson. Add a