CSS dropdown menu with sprites - hover buttons shift to left

I hope some people around here can help me, I’ve been on this all day long and can’t seem to find a solution. I have a CSS dropdown menu with a sprite graphic on top.

http://www.slayerized.com/indextest.html

Now if you click on the “Interactive” button on the right the hovered images shows up but goes to the left. The first buttons like “Home” or “news” dont have this problem. How can I fix that?

My CSS code:

#nav {
background:url(‘/header/headerbar.gif’);
width:880px;
height:30px;
border-top: solid 1px black;
border-bottom: solid 1px #400000;
}

/* Beginn Horizontales Menu */

#listmenu ul {
float: left;
position: relative;
z-index: 10;
width: auto;
margin: 0px;
padding: 0px;
display:inline;
}

#listmenu li {
float:left;
position:relative;
list-style-type:none;
}

#listmenu a {
display: block;
height: 30px;
}

/* DropDown Aufgeklappt */

#listmenu ul li ul {
position: absolute;
z-index: 100000;
width: 120px;
background-color: #200000;
top: 30px;
left: 0px; /* fixed IE position, very strange… */
}

#listmenu ul li ul li {
width: 100%;
margin: 0px;
position: relative;
z-index: 100000;
}

#listmenu ul li ul li a {
font-size: 8pt;
display: block;
float: none;
padding: 5px 5%;
text-decoration: none;
border: 1px solid #400000;
border-top-color: #000000;
color: white;
font-weight: bold;
height: auto;
}

#listmenu ul li ul li a:hover {
background-color: #400000;
color: red;
}

/* Damit Headerbar nicht ins aufgeklappte Menu geladen wird */

#listmenu li a {position:relative;left:-999em}
#listmenu li:hover a {left:auto}

#listmenu li li a {text-indent:0}
#zlistmenu li li:hover a {text-indent:999em}
#zlistmenu li li a:hover {text-indent:999em}

#listmenu ul ul {text-indent:0;}

/* make the drop-down display as the menu is rolled over */

#listmenu ul li ul {display:none;}
#listmenu ul li:hover ul {display:block;}

/* Browserhacks */

/* add a top line to drops and pops in IE browsers - can’t read :first-child */

  • html #listmenu ul li ul {border-top:1px solid #81110f; border-left:0px;}

/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */

  • html #listmenu ul li ul li ul {left:9.85em; voice-family: “\”}\“”; voice-family:inherit; left:10em;}

/* the “be nice to Opera” rule */
html>body #listmenu ul li ul li ul {
top:-1px;
left:10em;
}

/* Hoverbefehle fuer Horizontales Menu */

#listmenu li:hover {background:url(‘/header/headerbar.gif’)}

#listmenu li.home {width:85px; height:30px;}
#listmenu li.home:hover {background-position:-15px -30px}
#listmenu li.news {width:66px; height:30px;}
#listmenu li.news:hover {background-position:-100px -30px}
#listmenu li.touring {width:81px; height:30px;}
#listmenu li.touring:hover {background-position:-166px -30px}
#listmenu li.music {width:67px; height:30px;}
#listmenu li.music:hover {background-position:-247px -30px}
#listmenu li.band {width:63px; height:30px;}
#listmenu li.band:hover {background-position:-316px -30px}
#listmenu li.video {width:62px; height:30px;}
#listmenu li.video:hover {background-position:-381px -30px}
#listmenu li.printedmedia {width:128px; height:30px;}
#listmenu li.printedmedia:hover {background-position:-443px -30px}
#listmenu li.pictures {width:80px; height:30px;}
#listmenu li.pictures:hover {background-position:-570px -30px}
#listmenu li.merchandise {width:111px; height:30px;}
#listmenu li.merchandise:hover {background-position:-653px -30px}
#listmenu li.interactive {width:101px; height:30px;}
#listmenu li.interactive:hover {background-position:-767px -30px}

The HTML bit:

<div id=“nav”>
<div id=“listmenu”>
<ul style=“margin-left:15px”>
<li class=“home”><a style=“width:85px; height:30px” href=“/index.html”></a></li>

<li class=“news”><a style=“width:66px; height:30px” href=“#”></a>
<ul>
<li><a href=“/whatsnew/slayernews.html”>Slayer News</a></li>
<li><a href=“/whatsnew/pagenews.html”>Page News</a></li>
<li><a href=“/ontheroad/tourdates.html”>Latest Tourdates</a></li>
<li><a href=“/whatsnew/newsarchive.html”>News Archive</a></li>
</ul>
</li>

<li class=“touring”><a style=“width:81px; height:30px” href=“#”></a>
<ul>
<li><a href=“/ontheroad/tourdates.html”>Latest Tourdates</a></li>
<li><a href=“/ontheroad/tourdatabase/tourdatabase.html”>Tour Database</a></li>
<li><a href=“/ontheroad/touritems.html”>Tour Items</a></li>
</ul>
</li>

<li class=“music”><a style=“width:67px; height:30px” href=“#”></a>
<ul>
<li><a href=“/music/discography.html”>Discography</a></li>
<li><a href=“/music/singlespromos.html”>Singles & Promos</a></li>
<li><a href=“/music/serialnumbers.html”>Serial Numbers</a></li>
<li><a href=“/music/soundtracks.html”>Soundtracks</a></li>
<li><a href=“/music/compilations.html”>Compilations</a></li>
<li><a href=“/music/tributes.html”>Tributes</a></li>
<li><a href=“/music/bootlegs/cdbootlegs.html”>CD Bootlegs</a></li>
<li><a href=“/music/bootlegs/vinylbootlegs.html”>Vinyl Bootlegs</a></li>
<li><a href=“/music/lyrics.html”>Lyrics</a></li>
<li><a href=“/music/tablature.html”>Tablature</a></li>
</ul>
</li>

<li class=“band”><a style=“width:63px; height:30px” href=“#”></a>
<ul>
<li><a href=“/band/bandmembers/bandmembers.html”>Band Members</a></li>
<li><a href=“/band/slayerhistory.html”>Slayer History</a></li>
<li><a href=“/band/unreleasedsongs.html”>Unreleased Songs</a></li>
<li><a href=“/band/didyouknow.html”>Did You Know?</a></li>
<li><a href=“/band/picks.html”>Guitar & Bass Picks</a></li>
<li><a href=“/band/inyourlanguage.html”>In Your Language</a></li>
</ul>
</li>

<li class=“video”><a style=“width:62px; height:30px” href=“#”></a>
<ul>
<li><a href=“/videography/officialvideos.html”>Official Videos</a></li>
<li><a href=“/videography/videobootlegs.html”>Video Bootlegs</a></li>
<li><a href=“/videography/videoclips.html”>Video Clips</a></li>
<li><a href=“/videography/tvshows.html”>TV Shows</a></li>
</ul>
</li>

<li class=“printedmedia”><a style=“width:128px; height:30px” href=“#”></a>
<ul>
<li><a href=“/printedmedia/books.html”>Slayer Books</a></li>
<li><a href=“/printedmedia/thepress.html”>The Press</a></li>
<li><a href=“/printedmedia/tabbooks.html”>Tab Books</a></li>
<li><a href=“/printedmedia/tourbooks.html”>Tourbooks</a></li>
<li><a href=“/printedmedia/magazines.html”>Magazine Covers</a></li>
</ul>
</li>

<li class=“pictures”><a style=“width:80px; height:30px” href=“#”></a>
<ul>
<li><a href=“/pictures/tomaraya.html”>Tom Araya</a></li>
<li><a href=“/pictures/kerryking.html”>Kerry King</a></li>
<li><a href=“/pictures/jeffhanneman.html”>Jeff Hanneman</a></li>
<li><a href=“/pictures/davelombardo.html”>Dave Lombardo</a></li>
<li><a href=“/pictures/band.html”>Band Pictures</a></li>
<li><a href=“/pictures/paulbostaph.html”>Paul Bostaph</a></li>
<li><a href=“/pictures/other.html”>Other Pictures</a></li>
</ul>
</li>

<li class=“merchandise”><a style=“width:111px; height:30px” href=“#”></a>
<ul>
<li><a href=“/merchandise/shirts.html”>Shirts</a></li>
<li><a href=“/merchandise/postersflags.html”>Posters & Flags</a></li>
<li><a href=“/merchandise/patchesstickers.html”>Patches & Stickers</a></li>
<li><a href=“/merchandise/postcards.html”>Postcards</a></li>
<li><a href=“/merchandise/misc.html”>Misc Merchandise</a></li>
<li><a href=“/merchandise/crewmerchandise.html”>Crew Merchandise</a></li>
<li><a href=“/merchandise/shoes.html”>Slayer Shoes</a></li>
<li><a href=“/merchandise/glassware.html”>Glassware</a></li>
</ul>
</li>

<li class=“interactive”><a style=“width:101px; height:30px” href=“#”></a>
<ul>
<li><a href=“/interactive/guestbook.html”>The Guestbook</a></li>
<li><a href=“/interactive/links.html”>Links</a></li>
<li><a href=“/interactive/contact.html”>Contact</a></li>
<li><a href=“/interactive/sitemap.html”>The Sitemap</a></li>
</ul>
</li>

</div>
</div>

Please excuse my english, I’m not a native english speaker.

Nevermind, please delete my post…fixed it