Help form css master

1

I have hit a bit of a bump. I am wanting to know if it is posible to control the background of a span tag when a list item is rolled over. The catch is that the span tag is not in side the list item but rather next to it. Like so:

<ul class="nav">
<div>
<li class="home"><a href="">Menu 1<span></span></a></li><span class="s1"></span>

<li class="blog"><a href="">Menu 1<span></span></a></li><span class="s2"></span>

</div>
</ul>

“s1” is what I am wanting to change. basically to give a bit more info I am wanting to make a nav system where when I rollover “home” the first changes it’s background and so does the “s1” . But when you rollover blog it does the same but again changes the “s1” to a different background image. I understand that this is a some what laborious way of making a nav menu but I want it to look like the attached image.

So far the css I have is:


.nav {
	list-style-type: none;
        margin:0;
        padding:0;
        position: absolute; 
        top: 2em; /* Menu position that can be changed at will */
        left: 3em;
}
.nav li {
	float: left;
}
.home a {       /* definition for each button in the menu */
	width: 122px;	   /* button width that can be changed at will */
	height: 23px;
	float: left;
	display: block;
	text-align: center;
	border: 1px solid #fff;
	text-decoration: none;
	color: #000;
	background-image: url(images/nav.png);
	background-repeat: no-repeat;
	background-position: left;
}
.home a span {
	display: none;
}

.blog a {       /* definition for each button in the menu */
	width: 122px;	   /* button width that can be changed at will */
	height: 23px;
	float: left;
	display: block;
	text-align: center;
	border: 1px solid #fff;
	text-decoration: none;
	color: #000;
	background-image: url(images/nav.png);
	background-repeat: no-repeat;
	background-position: left;
}
.blog a span {
	display: none;
}
.nav div .s1 {
}

Cheers would love any help.