Using CSS to Build a Horizontal Menu

Building a horizontal menu in just a couple of lines of CSS.

One of the most common questions I get asked is how to build a simple menu like the one at the top of my website, 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.