2 Level CSS Image Sprite Problem

[nihilater]

So i have a good and working Image Sprite Rollover but I needed to have a 2 level navigation. I have this problem

http://beaufaces.com/this/try_this.html

the problem is that when i hover on third button it's ok, but when i hover on the 1st and 2nd dropdown menu, the main navigation turns to color green covering the image button and every button is now the width of the third.

i have this html code


<ul id="navimask">

<li id="nav1"><a href="#">asd</a></li>
<li id="nav2"><a href="#">asd</a></li>
<li id="nav3"><a href="#">asd</a>

<ul id="vads">
<li><a href="#">Next Year</a></li>
<li><a href="#">Next Year</a></li>
</ul>

</li>
<li id="nav4"><a href="#">asd</a></li>
<li id="nav5"><a href="#">asd</a></li>
<li id="nav6"><a href="#">asd</a></li>
<li id="nav7"><a href="#">asd</a></li>
<li id="nav8"><a href="#">asd</a></li>


</ul>

and this CSS

for image sprite rollover which works just fine:


#navimask
{
width:950px; height:31px;
padding:0;
list-style:none;
background: url(../images/navimask.jpg) no-repeat;
}

#navimask li {
float:left;
height:31px;
}
#nav1 {
width:111px;
}
#nav2 {
width:113px;
}
#nav3 {
width:120px;
}
#nav4{
width:139px;
}
#nav5 {
width:141px;;
}
#nav6 {
width:121px;
}
#nav7 {
width:89px;
}
#nav8 {
width:116px;
}

#navimask a {
display:block;
height:31px;
text-indent:-9999px;
outline:none;
}

#navimask a:hover {background: url(../images/navimask.jpg) no-repeat;}

#nav1 a:hover {background-position:-0 -31px;}
#nav2 a:hover {background-position:-111px -31px;}
#nav3 a:hover {background-position:-224px -31px;}
#nav4 a:hover {background-position:-344px -31px;}
#nav5 a:hover {background-position:-483px -31px;}
#nav6 a:hover {background-position:-624px -31px;}
#nav7 a:hover {background-position:-745px -31px;}
#nav8 a:hover {background-position:-834px -31px;}

for showing up the 2nd level menu which is in bad condition:


ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;

}
#nav3 ul li {
display: block;
position: relative;
float: left; z-index:555;
visibility:hidden;

}

#nav3 ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap; z-index:555;
text-indent:0px;


}
#nav3 ul li a:hover { background: #009900; z-index:555; }
#nav3 li:hover ul {
display: block;
position: absolute;


}

li:hover a { width:139px; background:#7ba340; visibility:visible;}

[nihilater]

This one is solved man. I used some javascript to make it work. :)