Image to appear behind link with hover

Question

I found several related articles that helped, but I've hit a wall.

I have a menu nav with two things happening when the user hovers over a link: the link changes color and an image appears behind the link. Right now, the link is changing colors and the image is showing, but it's appearing in front of the text link. I can't figure out how to get the image to appear behind the text.

to get the image to appear on hover:

#menu a:hover span.blognav{
position: absolute;
left: -42px;
top: 4px;
width: 190px;
height: 15px;
background: url("AVSprite-menu.png");
background-position: 0px -1px;
}

#menu a:hover span.artnav{
position: absolute;
left: -42px;
top: 40px;
width: 190px;
height: 15px;
background: url("AVSprite-menu.png");
background-position: 0px -39px;
}

#menu a:hover{
color: #29fffa;
}


<div id="menu">
<ul style="list-style-type: none;">
    <li><a href="blog.html">Blog<span class="blognav"></span></a></li>
    <li><a href="about.html"><font color="#29fffa">About</font></a></li>
    <li><a href="art.html">Art<span class="artnav"></span></a></li>
    <li><a href="print.html">Print</a></li>
    <li><a href="web.html">Web</a></li>
    <li><a href="events.html">Events</a></li>
    <li><a href="marketing.html">Marketing</a></li>
    <li><a href="contact.html"><font color="black">Contact</font></a></li>
</div>

I'm a beginner, so if there's anything else you see in this code that can help, please let me know. Thanks in advance!

Answer 1

http://jsfiddle.net/8sxxy/ see if this works for you..I have added z-index

a
 {
    position: relative;
    z-index: 5;
}



#menu a:hover span.blognav{
position: absolute;
left: -42px;
top: 4px;
width: 190px;
height: 15px;
background: url("http://s20.postimage.org/ospccawhp/35436251_1_620x433.jpg");
background-position: 0px -1px;
z-index: -5; /* you need to add this too*/

}