css rollovers using background position

[pagetta]

I am trying to design a menu and for items that are NOT links i want an arrow, for those that are links i want no arrow - see http://www.m-science.com/products/ - the product list on the left hand side - this is in a table based layout but i would like to do this as a css list menu.

so far i have this as my css:
#menu {
width: 138px;
font-size:10px;
margin:0 3px 0 0;
padding:0;
}
#menu ul {
list-style-type:none;
text-align:left;
margin:0;
padding:0 3px 0 0;
color:#6899CC;
}
#menu ul li {
background: url(arrow.gif) 3px 5px no-repeat;
font-weight:bold;
padding:5px 5px 7px 12px;
margin:3px 0 0 3px;
border-bottom:1px dashed #828282;
border-top:0px;
}
#menu li a:link,
#menu li a:active,
#menu li a:visited,
#menu li a:hover {
background-position: -200px -200px;
text-decoration:none;
color:#a4a4a4;
font-weight:normal;
}
#menu li a:hover{
color:#a4a4a4;
text-decoration:underline;
}

and heres my html:
[size=9]<div id="menu">
<ul>[*]Introduction[*]SMS Online[*]SMS Server[*]SMS Groupware[*]SMS for Developers[*]SMS for Web Service[*]SMS Email Gateway[*]SMS Automation Server[/list]
</div>[/small]

the arrows display all the time they are not disappearing when a list item is a link - i have looked up tutorial after tutorial online and cannot find how to make this work so any advice is truly appreciated!
tahnk you

[speed]

CSS:

#menu {
	width: 138px;
	font-size:10px;
	margin:0 3px 0 0;
	padding:0;
}
#menu ul {
	list-style-type:none;
	text-align:left;
	margin:0;
	padding:0 3px 0 0;
	color:#6899CC;
}
#menu ul li {
	font-weight:bold;
	padding:5px 5px 7px 0;
	margin:3px 0 0 3px;
	border-bottom:1px dashed #828282;
	border-top:0px;
	display: block;
}
#menu ul li b {
	background-image: url(arrow.gif);
	background-position: 3px 50%;
	background-repeat: no-repeat;
	padding-left: 12px;
}
#menu li a:link,
#menu li a:active,
#menu li a:visited,
#menu li a:hover {
	text-decoration:none;
	color:#a4a4a4;
	font-weight:normal;
	padding-left: 12px;
}
#menu li a:hover{
	color:#a4a4a4;
	text-decoration:underline;
}

HTML:

<div id="menu">
	<ul>
		[*]Introduction
		[*]SMS Online
		[*]SMS Server
		[*]SMS Groupware
		[*]SMS for Developers
		[*]SMS for Web Service
		[*]SMS Email Gateway
		[*]SMS Automation Server
	[/list]
</div>

[pagetta]

thanks speed that has done the trick....whilst you are on hand being so helpful though...
with any menu options that are longer than one line, the second line sits right to the left and doesn't have the same padding - is there a way to overcome this?

thank you once again

[speed]

Change the CSS to:

#menu li a:link,
#menu li a:active,
#menu li a:visited,
#menu li a:hover {
	text-decoration:none;
	color:#a4a4a4;
	font-weight:normal;
	padding-left: 12px;
	display: block;
}

The display: block is the addition.

[pagetta]

you're a star thank you so much!

[speed]

Glad to help.