help form css master

[Daimz]

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 <span> changes it's background and so does the "s1" <span>. But when you rollover blog it does the same but again changes the "s1" <span> 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.

[Daimz]

ok I have actually sorted it and got it working.
check it out at http://arctosdesign.com/arctos/blog.html
I have another question now tho, and that is how can I add Jquery fade to it?
I have been looking into a few options like:
http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/comment-page-1/#comment-5317
But the problem I am having is that I use <spans> to create the navigation effect and therefor I am using a image replacement technique with the background images to create the rollover. I did find a solution that potentially could work for the rollover on the actual nav menu here http://greg-j.com/static-content/hover-fade-redux.html But then I still have the problem of how do I get the top bar to fade in as well.

Please I would love it if some one could take a look at my source and give me some pointers.