Of course a more realistic example might be something like this, but there are still variants that really depend on the actual layout of the page...thanks for letting me play.
<head>
<title>Mini Menu Example</title>
<style type="text/css">
.menu li {
float: left;
list-style: none;
height: 28px;
overflow: hidden; /*optional*/
}
.menu a {
padding: 6px 12px 8px;
line-height: 28px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #FFF;
background: #55298A;
}
.menu a:hover {
color: #000;
background: #EEE;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>