Image passing over elements of a list on hover
===

So what I'm trying to make here is a simple  horizontal css menu, however, whenever the user hovers over an item in the list, I want a little triangle to show up above the said item
Here's what I've come up with so far 
HTML:

    <div id="navbar2">
			<div id="navholder">
				<ul id="nav2">
					   <li>
							<a href="#">category one</a>
					   </li>
					   <li>
							<a href="#">section two</a>
					   </li>
					   <li>
							<a href="#">articles</a>
					   </li>
					   <li>
							<a href="#">posts here</a>
					   </li>
					   <li>
							<a href="#">category two</a>
					   </li>
				</ul>
			</div>
	  </div>
and the css applied to it:

    ul#nav2
	{
		background:url('images/redbar.png');
		list-style-type:none;
		height:50px;
	}
	#navbar2 ul li
	{
		height:50px;
		display:inline;
		line-height:35px;
		padding-left:19px;
	}
	#navbar2 ul li:hover 
	 {	
		height:50px;
		background-position: 50% 0%;
	    background:url('images/Project_0040_Layer-21.png') no-repeat;
	 }
	 #navbar2 ul li a 
	{
		color:#fff;
		text-decoration:none;
		font-size:10pt;
        }
And even though i specify the background position at top center it simply doesnt show up at all...
What am I doing wrong?
