For novice website designers a simple horizontal menu can be pretty daunting. I know it caused me frustrations starting out. In this post we analyze how to create a cross-browser compatible and W3C valid HTML/CSS horizontal menu.

Simple HTML Horizontal Menu Demo

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Simple HTML Horizontal Menu Code

<ul class="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>

ul.menu {
	list-style:none; /* remove bullets */
    background:#999;
    overflow:auto; /* span the width of the container */
    padding:0; margin:0; /* reset browser defaults */
    height:100%; /* ie6 fix */
    }
ul.menu li {
	display:inline; /* line-up the list items horizontally */
    padding:0; margin:0; /* again, reset browser defaults */
    }
ul.menu li a {
	padding:10px 20px;
    background:#999;
    color:#fff;
    text-decoration:none;
    display:block; /* block it baby! */
    float:left; /* float each list item to the left */
    }
ul.menu li a:hover {
	background:#777;
    }

Validation and Compatibility

• Valid XHTML 1.0
• Valid CSS
• Internet Explorer 7+ (PC)
• Internet Explorer 6 (PC)
• Firefox 3 (PC)
• Chrome 2 (PC)
• Safari 3 (PC)

Download: Simple HTML Horizontal Menu