css <ul> menu - want a mouseover image?

**LouPhi** · 06-28-2011, 10:04 AM

I'm using a css <ul> menu but want to have an image appear in the left hand margin on mouseover (a small arrow or star etc)...

Here's the CSS for the menu :

Code:

#vertmenu {
width: 190px;
padding: 0px;
margin: 0px;
}

#vertmenu h1 {
display: block;
background-color:#FF9900;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #009999;
margin: 0px;
width:190px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
	display: block;
	text-decoration: none;
	color: #009999;
	width:190px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;
	border-top-width: 1px;
	border-top-style: dashed;
	border-top-color: #CCCCCC;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
	color: #666666;
	background-color: #FFFFFF;
}

and the page code

Code:

<div id="vertmenu">
			<ul>
				<li><a href="#" tabindex="1">item 1</a></li>
				<li><a href="#" tabindex="2">item 2</a></li>
				<li><a href="#" tabindex="3">item 3</a></li>
			</ul>
</div>

Any ideas?