Over a couple of tutorials I showed you how to turn a simple list like the one here into a horizontal menu and how to add rollover effects to that menu so that your list items made it clear to users that they could click them.

Now, let’s take a look at using some simple CSS tricks to turn your list items into menu buttons.

The HTML

We’re going to use some pretty basic HTML to accomplish this task:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

The CSS to create the buttons is found entirely in the <li> functions of the CSS, with only minor modifications to the CSS used in our last tutorial for the a:hover and a:action state.

.menu ul {
list-style: none; /* removes the • from the list items*/
text-align: center; /* centers the list items */
}

.menu li {
font-family: “Lucida Sans”, Arial, Helvetica, Geneva, sans-serif;  /* sets the font of the menu */
font-size: 12px;  /* sets the size of the font */
display: inline;  /* makes the menu items float beside each other */
margin: 0px 10px 0px 10px;  /* leaves 10px of space between the items */
font-weight: bolder;  /* makes the font bold */
background-color: #999999;  /* sets the background to dark grey */
padding: 5px;   /* adds some space around the words */
border: 1px solid #000000;   /* makes the border black */
}

.menu a:link {
color: #000000;  /* hyperlink color is now black */
text-decoration: none;   /* remove the underline */
}

.menu a:hover {
color: #cccccc; /* change the color to light grey */
}

.menu a:active {
color: #ffffff;  /* change the color to white */
}