Problemas con Menú Vertical en Css

[riera_horacio]

Este es el codigo Css:

#menu {
margin:0;
text-align:center;
width:200px;
height:693px;
background-color:#BCD3C3;
float:left;
}

#menu ul {margin:0; list-style:none; text-align:center; padding:0; background:#BCD3C3;}
#menu ul ul{background: #BCD3C3; white-space:nowrap;}

#menu li {list-style:none;}
#menu li {display:inline-block;display:inline;}


#menu ul {position:relative; left:-9999px;} /* AQUI SOLUCIONA PARTE DEL PROBLEMA */

#menu ul.level1 {position:relative; left:0px; width: 200px; line-height: 5px;}

#menu ul.level2 {width: 300px;}

#menu a {display:block; font: bold 12px verdana, arial; color:#000; text-decoration:none; padding:4px 20px 4px 10px;}

#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-21px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}

#menu li a:hover {background:#E3F6CE;}
#menu li:hover > a {background: #E3F6CE;}
#menu li a.fly {background: url(flecha.gif) no-repeat right top;}
#menu li a.fly:hover {background:#E3F6CE url(flecha.gif) no-repeat right top;}
#menu li:hover > a.fly {background:#E3F6CE url(flecha.gif) no-repeat right top;}