rocknbil - 9:25 pm on Jan 4, 2010 (gmt 0)

Navigation image in whole menu?

#menu {
margin:0;
padding:6px;
background: url(/path/to/image.jpg) top left no-repeat;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
}

#menu li a:link {
color: #ff0000;
/* and so on, for all link states */
}
....

<ul id="menu">
<li><a href="about.html">About</a></li>
<li><a href="contacthtml">Contact</a></li>
<!-- etc -->
</ul>

Or, navigation image for each link state?

#menu {
margin:0;
padding:6px;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
background: url(/path/to/no-hover.jpg) top left no-repeat;
}

#menu li a:link, #menu li a:active #menu li a:visited {
color: #ff0000;
background: url(/path/to/no-hover.jpg) top left no-repeat;
/* a:link may not be needed */
}

#menu li a:hover {
color: #00ff00;
background: url(/path/to/hover.jpg) top left no-repeat;
/* may not be needed */
}