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.