CSS Menu Navigation Issue

Trying to get Images and Text with an unordered list

[chief stains]

Hi,

I'm trying to create a horizontal list for navigation with an image and below it a piece of text. I have hit a brick wall in terms of searching for a solution and trying to get it right myself. Can anybody help?

What is happeing at the moment is that the image and text are appearing inline, but I would like to have the text appear underneath the image. Thanks in advance....

Here is the HTML:

<div id="nav">
<ul>
<li><a href="#"><img src="image.jpg"><span>HOME</span></a></li>
<li><a href="#"><img src="image_1.jpg"><span>OTHER</span></a></li>
  </ul>
</div>

and the CSS:

#nav{
width:100%;
margin:0 auto;
padding:0;
}
#nav ul{
list-style:none;
}
#nav li{
display:inline;
}
#nav a{
font:bold 17px arial;
color:#cfcfcf;
text-decoration:none;
text-transform:lowercase;
}
#nav a:hover{
color:white;
}

[4css]

May I question why you have a span in there?

Shot in the dark, but try a <br /> and see what happens?