I have developed a multi level menu in umbraco with background image changing in css when clicked

the backgorund image changes but it creates this hude GAP which does not look good,

here is the css file 

#menu a {
  font-size : 11px;
  font-weight : bold;
  color : white;
  display : block;
  height : 20px;
  background : transparent;
  text-decoration : none;
  
  vertical-align:middle;
}
#menu ul
{
  list-style: none;
  margin:0;
  padding:0;
  text-align : left;
}

#menu ul li {
  list-style: none;
  text-align : left;
  background-image : url(/media/45/btn_blue_arrow.jpg);
  background-repeat : no-repeat;
  margin: 0;
 
  font-size : 10px;
  vertical-align:middle;
}

#menu ul li a{
 
  margin-left:10px;
  margin-top:0px;
  

}
  
/*--maxmenu--*/



 #menu ul#level1 li.hasselected 
{
  
 
  
  list-style: none;
  text-align : left;
  margin: 0;
  padding:0;
  font-size : 10px;
  vertical-align:middle;
  
} 
#menu ul#level1 li.hasselected , #menu ul#level2 li.hasselected a.selected
{

 background-image: url('');
  

  background-repeat:no-repeat;
} 
  
#menu ul li  a.selected 
{
  background-image: url(/media/4376/btn_red_arrowdown.jpg);
 
   padding:0;
   list-style: none;
 
  font-size : 10px;
 
  background-repeat:no-repeat;

 
}
 
  #menu ul li.selected
{
  background-image: url(/media/4376/btn_red_arrowdown.jpg);
  list-style: none;
  text-align : left;
  margin: 0;
  padding:0;
  
  font-size : 10px;
  vertical-align:middle;
  background-repeat:no-repeat;
}


  #menu ul li  a.branch 
{
 
   background-image: url(/media/4376/btn_red_arrowdown.jpg);
  list-style: none;

  margin: 0;
  padding:0;
  font-size : 10px;
  vertical-align:middle;
  background-repeat:no-repeat;;
}

#menu ul#level2 li.hasselected a:visited
{
  color:#bc2723;
}
  
  /*--end here--*/
#menu ul li a:hover {
  text-decoration : underline;
}

#menu ul li ul {
margin-left : 10px;
}
#menu ul ul {
margin-top : 5px;
}
#menu ul li ul li {
background : none;

font-size : 10px;
text-align : left;
}
#menu ul li ul li a {
font-size : 10px;
text-align : left;
color : #0b67b1;
text-align : left;
}
#menu ul li ul li a:active {
text-decoration : underline;
color : red;
}
#menu ul li ul li a:hover {
text-decoration : underline;
color : red;
}

and the link

http://umbraco.scan-trans.com/links.aspx

any suggestions wil be useful