Styled vertical nav bar

[jhatter]

Please can anyone suggest a way to get my menu to look like the jpg I have attached?
ie I want a background colour block behind each link. The block should be a few px wider than the text and have an uneven look - not uniform.

I know I could achieve this with just 4 regular text links, but was interested to know if it can be done in one simple, css styled list?

Thanks, in anticipation of your response.


.navmenu{
border: 0;
background-color: 333333;
width: 150px;
padding-top: 15px;
}

.navmenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.navmenu a{
font: 16px Georgia;
text-align: left;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
}

.navmenu a:visited{
color: #595959;
}

.navmenu a:hover{
background-color: #333333;
color: #FFFFFF;
}



<div class="navmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Online shop coming soon</a></li>

</ul>
</div>

[tomywie]

try this :)


.navmenu {
width: 200px;
}

.navmenu ul {
padding: 0;
margin: 0;
list-style-type: none;
}

.navmenu li {
margin-top: 10px;
}

.navmenu .top {
margin: 0;
}

.navmenu a {
background: #FFFFFF;
padding: 4px;
display: inline;
color: #595959;
text-decoration: none;
}

.navmenu a:visited {
color: #595959;
}

.navmenu a:hover {
background-color: #333333;
color: #FFFFFF;
}


<div class="navmenu">
<ul>
<li class="top"><a href="#">Home</a></li>
<li><a href="#">Collection</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Online shop coming soon</a></li>
</ul>
</div>