Simple HTML Horizontal MenuFor 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

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> {
	list-style:none; /* remove bullets */
    overflow:auto; /* span the width of the container */
    padding:0; margin:0; /* reset browser defaults */
    height:100%; /* ie6 fix */
    } li {
	display:inline; /* line-up the list items horizontally */
    padding:0; margin:0; /* again, reset browser defaults */
    } li a {
	padding:10px 20px;
    display:block; /* block it baby! */
    float:left; /* float each list item to the left */
    } li a:hover {

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)

One Comment for “Simple HTML Horizontal Menu”

  1. Kris says:

    Hooray! Thanks you very much for this. It works!
    I’ll be back to post a link to my site once she’s live.
    Thanks Again.