ayuda con un menu en css

hola bueno tengo este problema:

como ven hay bandas blancas entre los elementos del menu
¿que puedo hacer para eliminarlas?
adjunto el archivo css

Código :

#menu, #menu li ul {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 11px;
   width: 150px;
   list-style-type: none;
   line-height: 18px;
   position: relative;
   left: 2px;
   margin: 0px;
   padding: 0px;
   border: 1px solid #369;
}
#menu li {
   position: relative;
}
#menu li a {
   display: block;
   text-decoration: none;
   padding: 3px;
   color: #000;
   width:auto;
   background-color: #369;
   background-image: url(fondo.png);
   background-repeat: repeat-x;
   background-position: top;
}
#menu li ul { /* Sub Menu */
   position: absolute;
   width: 250px;
   top: -1px;
   display: none;
}
#menu li a:hover {
   background-color: #333;
}

/* Holly Hack for IE \*/
* html #menu li {
   float: left;
   height: 1%;
}
* html #menu li a {
   height: 1%;
}
/* End */

y aca el script

Código :

var menuids=new Array("menu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
      var spanref=document.createElement("span")
      spanref.className="arrow"
      spanref.innerHTML="&nbsp;&nbsp;"
      ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

y tambien el html

Código :

<ul id="menu"><li><a href="#">item1</a>
              <ul>
                <li><a href="#">subitem1</a></li>
              </ul>
            </li>
            <li><a href="#">item2</a>
              <ul>
                <li><a href="#">subitem1</a></li>
                <li><a href="#">subitem2</a></li>
                <li><a href="#">subitem3</a></li>
                <li><a href="#">subitem4</a></li>
                <li><a href="#">subitem5</a></li>
                <li><a href="#">subitem6</a></li>
                <li><a href="#">subitem7</a></li>
                <li><a href="#">subitem8</a></li>
              </ul>
  </li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
          </ul>

porfavor necesito una respuesta lo mas pronto posible

que exploador usas, por que en firefox si se ve como tu quieres:


saludos!

uso IE8
el menu es para una pagina a la cual de los visitantes el 90% usa el IE(desconosco sus versiones)

bueno al no ver una respuesta me puse a hacer varios intentos y consegui solucionar los espacios pero alterando la posicion del submenu

Código :

#menu li {
   position: relative;
   * position: inherit;
}

en el IE8 se ve bien, el problema es en IE 7 y anteriores

IE8

IE7