How to Create a Horizontal Menu Using CSS

Create unordered lists and use CSS to transform them into menus.

When coding a Web page in HTML and CSS, the preferred method is to create an unordered list in HTML and then apply to it some CSS styling. No matter how complicated a menu becomes, the unordered list remains an effective method for structuring the links. Some cross-browser issues require special care and in-depth knowledge of CSS code to make a horizontal menu usable and keep it from breaking.

Instructions

1. Open up your HTML file and add <ul> and </ul> tags to the Web page. Between those tags, add links wrapped in <li> and </li> tags. The <li> tag stands for "list item" and is used in bullet lists and numbered lists, but many developers also use these as the basis for their menus. Here is an example of an unordered list you can use to create a menu:

   <ul>

   <li><a href="page1.html">Page 1</a></li>

   <li><a href="page2.html">Page 2</a></li>

   </ul>

   The above code shows two links in an unordered list. Most menus show more links than two. Add as many links as you like while keeping in mind that if you add too many, the menu will break. How many you can include depends on the width of your design, the width of the menu and the width of the user's screen.

2. Remove bullets, margins and padding from the unordered list. You do this by setting CSS properties, either in an external CSS file or between <style> and </style> tags.

   ul {list-style: none; margin-left: 0; padding-left: 0;}

   The above code removes formatting from your unordered list so you can style it as a menu.

3. Align all menu items to the left of each other by setting the "float" property to "left" for every <li> tag in the unordered list. This is how the CSS code looks:

   li {float: left;}

   This code gives you a straight line of links. You should style the links themselves instead of the list items, but setting "float" for the list items instead of the links prevents "stepping" in some browsers. "Stepping" is an error where the list of links appears like a set of steps instead of lining up in a straight, horizontal line.

4. Add padding to every link in CSS like so:

   li a {padding: 5px 10px; display: block;}

   In the above code, each link has a padding of five pixels on the top and bottom and 10 pixels on the left and right. Applying padding to the links creates a larger clickable area around the text of each link. Set "display: block;" to make browsers treat the links as blocks. Notice that the CSS selector here is "li a" instead of "a" because you do not want every link on the page to look like the links in the menu.

Tips & Warnings

• Use CSS to style the <ul> tag to create the menu background, border and shadow. Use CSS on the <a> tag to style the menu items. The :hover pseudo-selector is used to create hover states for menu items.

• When using CSS code, many cross-browser issues exist. Since menus require complex styling, test your Web page in multiple browsers, including older versions of Internet Explorer.

References

• A List Apart; Taming Lists; Mark Newhouse; Sept. 2002