Using CSS to Build a Horizontal Menu

Welcome to my blog, please feel free to subscribe to my RSS feed or leave a comment.

One of the most common questions I get asked is how to build a simple menu like the one at the top of my web site, using pure HTML and CSS. Actually it’s wonderfully easy and I’m happy to share the process with you.

The HTML

First, you’ll need to write the proper source HTML for the menu to work. I use unordered lists <ul> with list item <li> tags to build the menu items, this is in keeping with web standards and ensures compatibility across multiple devices.

The code a typical menu should look something like this:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

Now, with the basic HTML out of the way we have to take a look at the CSS codes we need to make the menu work, and how each of the does it.

We want to define the menu as a class, not an ID since we might want to reuse the code in both the header and the footer. An ID can only be used once on a page, were a class can be used multiple times. There is no actual code for the menu tag, it’s just a holder for us.

The <ul> tag on the other hand needs to be altered. To do this, we add the following code:

.menu ul {
list-style: none;
text-align:center;
}

Simply put, let’s get rid of the bullet (•) and center the content. Next we need to tell the <li> tags to sit side by side instead of appearing as a list, and we need to make sure they don’t bump into each other.

.menu li {
display: inline;
margin: 0px 10px 0px 10px;
}

There we have it, a table-less menu which appears in the center of your site in just a few lines of CSS.

Other Posts of Interest

• Turning your menu list into menu buttons
• Using CSS to highlight a link
• Using CSS to disguise a link.
• Adding Rollovers to your HTML without JavaScript
• How to center content with CSS and HTML
• How to make a web site look good in multiple browsers.
• Placing page content in Adobe Dreamweaver
• Structuring your web site with Adobe Dreamweaver
• Better HTML Helps Search Engine Results
• Blog Roundup for the 9th of October 2008