Really easy CSS Menu

When you start creating your website your first thought when it comes to the menu is to use a table.

Well, you can create a table for the menu, there's nothing wrong with that, but using tables isn't always the best choise.

So, this is an example where I'm using an unordered list (ul), to create my menu:

 <div id="MenuListContainer">
<ul>
<li><a href="#">Home Page</a></li>
<li>|</li>
<li><a href="#">Resources</a></li>
<li>|</li>
<li><a href="#">Webmasters</a></li>
<li>|</li>
<li><a href="#">Terms</a></li>
<li>|</li>
<li><a href="#">About</a></li>
<li>|</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

As you can see, using the unordered list become more easily to deploy and configure your menu.


The CSS styles to use are the following:

<style type="text/css" media="screen">
div#MenuListContainer {
width: auto;
height: auto;
text-align: left;
vertical-align: top;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 0px 0px 0px 0px; /* T R B L */
}

div#MenuListContainer ul {
display: inline;
list-style-type: none;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 5px 5px 5px 5px; /* T R B L */
background-color: #eeeeee;
}

ul li {
display: inline;
margin: 0px 0px 0px 0px; /* T R B L */
padding: 5px 5px 5px 5px; /* T R B L */
font-family: Georgia, Serif;
font-size: 10pt;
color: #000000;
text-align: center;
line-height: 1.6em;
}

li a:link {
color: #000000;
text-decoration: none;
}
li a:visited {
color: #696969;
text-decoration: none;
}

li a:hover {
color: #8b0000;
text-decoration: none;
}
</style>


And this is how it looks in IE7: