An easy way to do a CSS Horizontal Menu

By Andres Jaimes

February 22, 2012

Here it is. Start with a conventional item list like the following:

<ul class="hmenu">
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 2</a></li>
    <li><a href="">Option 3</a></li>
    <li><a href="">Option 4</a></li>
    <li><a href="">Option 5</a></li>
</ul>

Don’t forget to add the class parameter to the ul tag – that will help us do the magic. The previous list is rendered in a regular browser like the following:

Now, add the following CSS to your file:

.hmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}
.hmenu li {
    display: inline;
}
.hmenu a {
    background-color: #b0d3ee;
    color: #fff;
    padding: 0.5em 1em;
    text-decoration: none;
}
.hmenu a:hover {
    background-color: #62a9dd;
}

Tada! Our list turns into a beautiful menu:

The main trick here is done by the display: inline attribute. This will render the item list in a horizontal way. All other values are there to make it look fancier.

Enjoy.