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>
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)

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.