Advanced css sprite menu w/ background-position placement conundrum

[malikbhai]

Currently trying to create a vertical css-sprite menu inside a 150wx300h div using background-positioning. \[code\]{http://24.155.216.253/test1/images}\[/code\]To better understand heres an example of a 450x100 vertical css-sprite menu. {http://24.155.216.253/test1/index}The main problem i'm currently having is positioning a 750x100 vertical image in the div. After refreshing the sidemen.png disappears, but by hovering the mouse over it you can see the display blocks(links) there. {http://24.155.216.253/test2/index}Since the css menu displays in blocks of 50 height pixels the menu should fit snuggly..300px/6 = 50px..also trying to figure out how to remove the space above the #menu2(css ul) inside the 150wx300h div,but i doubt that is the culprit because i tried increasing the rightMENU height to 900px.If it's any help whatsoever ..The css horizontal menu tutorial gone vertical.. http://www.shopdev.co.uk/blog/animated-menus-using-jquery/\[code\]#rightMENU{width:150px;height:300px;margin-left:700px;position:absolute;} ul#menu2 {width:100%;height:50px;list-style:none;}ul#menu2 li {float:right;list-style-type: none;}ul#menu2 li a {background:url(images/sidemen.png) no-repeat scroll top left;display:block;height:50px;position:relative;} ul#menu2 li a.zombiemod {width:150px;}ul#menu2 li a.deathmatch {width:150px;background-position:-150px 0px;}ul#menu2 li a.deathrun {width:150px;background-position:-300px 0px;}ul#menu2 li a.s1 {width:150px;background-position:-450px 0px;}ul#menu2 li a.s2 {width:150px;background-position:-600px 0px;}ul#menu2 li a.s3 {width:150px;background-position:-750px 0px;}ul#menu2 li a span {background:url(images/sidemen.png) no-repeat scroll bottom left;display:block;position:absolute;top:0;left:0;height:100%;width:100%;}ul#menu2 li a.zombiemod span {background-position:0px -50px;}ul#menu2 li a.deathmatch span {background-position:-150px -50px;}ul#menu2 li a.deathrun span {background-position:-300px -50px;}ul#menu2 li a.s1 span {background-position:-450px -50px;}ul#menu2 li a.s2 span {background-position:-600px -50px;}ul#menu2 li a.s3 span {background-position:-750px -50px;}HTML <div id="rightMENU"> <ul id="menu2"><li><a href="http://stackoverflow.com/questions/13853480/#" class="zombiemod"><span></span></a></li><li><a href="http://stackoverflow.com/questions/13853480/#" class="deathmatch"><span></span></a></li><li><a href="http://stackoverflow.com/questions/13853480/#" class="deathrun"><span></span></a></li> <li><a href="http://stackoverflow.com/questions/13853480/#" class="s1"><span></span></a></li> <li><a href="http://stackoverflow.com/questions/13853480/#" class="s2"><span></span></a></li><li><a href="http://stackoverflow.com/questions/13853480/#" class="s3"><span></span></a></li> </ul></div>\[/code\]