Listing 1

<div id="menu">
<ul>
<li><a href="javascript:;">Button One</a></li>
<li><a href="javascript:;">Button Two</a></li>
<li><a href="javascript:;">Button Three</a></li>
<li><a href="javascript:;">Button Four</a></li>
<li><a href="javascript:;">Button Five</a></li>
</ul>
</div>

Listing 2

#menu ul {
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
}

Listing 3

/*/*/a{}
#menu a {
background-color: #99CC99;
border-top: 2px solid #D4E8D1;
border-left: 2px solid #D4E8D1;
border-bottom: 2px solid #6B8F6B;
border-right: 2px solid #6B8F6B;
text-decoration: none;
}
#menu a:hover, #menu a:focus {
border-top: 2px solid #6B8F6B;
border-left: 2px solid #6B8F6B;
border-bottom: 2px solid #D4E8D1;
border-right: 2px solid #D4E8D1;
background: #86AE8C;
}
/* NN4 hack */

Listing 4

#menu a {
display: block;
margin: 0;
text-decoration: none;
color: #000;
background: #FFF;
width: 118px; /*this is the width MINUS the left
padding and the right border - otherwise, you'll have a
space before your right border*/
}
/*/*/a{}
#menu a {
padding: 3px 0 1px 10px; /*this keeps the links from
sitting too far to the left*/
border-right: 12px solid #9C9; /*this gives you the
right decorative border - make sure to match the size of
the hover border */
}
/* NN4 hack */