Hello, I am trying to make a CSS sprite vertical navigation bar. I have used simillar principles to the horizontal, but changed the x and y values around. For some reason it is just not working. Below is the description of the image, CSS code and then the html. Help!

  • Each button is 150px by 150px
  • The normal states are on one side
  • The hover states are next to the normal
  • next to hover state I have put a down state, but I don't know how to work that



Code:
#navbar
{
	margin:0;
	padding:0;
	width:150px;
	height:750px;
	background-image:url(../Images/navbar.jpg);
}

#navbar li
{
	margin:0;
	padding:0;
	list-style-type:none;
	width:150px;
	height:150px;
	text-align:center;
	float:left;
	line-height:40px;
}

#navbar a
{
	display:block;
	height:150px;
}

#navbar a:hover
{
	background-image:url(../Images/navbar.jpg)
}

#btn1 {width:150px; height:150px;}
#btn1 a:hover {background-position:-150px,0;}

#btn2 {width:150px height:150px;;}
#btn2 a:hover {background-position:-150px,150px;}

#btn2 {width:150px height:150px;;}
#btn2 a:hover {background-position:-150px,300px;}

#btn2 {width:150px height:150px;;}
#btn2 a:hover {background-position:-150px,450px;}

#btn2 {width:150px height:150px;;}
#btn2 a:hover {background-position:-150px,600px;}
Code:
<div id="menu">

<ul id="navbar">
<li id="btn1"><a href="index.html">Home</a></li>
<li id="btn2"><a href="characters.html">Characters</a></li>
<li id="btn3"><a href="blog.html">Bob Blog</a></li>
<li id="btn4"><a href="contact.html">Contact Us</a></li>
<li id="btn5"><a href="colour.html">Colour Bob</a></li>
</ul>

</div>

Hope I make sense, thank you

Gemzilla.