many thanks for all these replies,
I've looked at the two examples given by EAS and Ratanfx, but found that using the
display: block;
always end up with my menus going vertically and I was hoping for horizontal.
So using the example given by langsor works great for me except the <ul> part is pushing the menu across to the right and I need it back on the left,
I've tried using negative padding and negative margins on the <ul> but to no avail,
having found this article :
Un-indenting <UL> in CSS
It seems the best way is to do without the <ul> completely (looks fine in ie and ff) but isn't true code.
Many thanks to you all for helping on my css journey,
Opel.
So my final code is,
<html>
<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>
<div class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</div>
</body>
</html>