Using CSS to Build a Horizontal Menu

Code Library

Published on January 6, 2009 and updated on May 2, 2026 by Christopher Ross

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 for 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 them 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, whereas 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: centre; }

Simply put, let’s get rid of the bullet (•) and centre 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 centre of your site in just a few lines of CSS.

Last Reviewed

This article was last reviewed on May 2, 2026 for accuracy and relevance.

Ready for the Next Step?

If this connects to a real challenge your team is facing, I can help you map a next step.

Book a discovery call