[Resolvido] Problemas com Menu Drop Down

Boa tarde pessoal!

Novamente, no layout que estou montando aqui agora tive um problema no menu Drop Down que fiz do zero. Ele está funcionando, porém ele aparece sob o menu principal, como na imagem abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fernandotholl.net/imagens/menu2.jpg&key=1b64c70149b4b49fbc2a306008e7b6d08531c4674ad57d49fa7750ed2c9bc2a7" alt="menu2.jpg" />

Eu quero que o Sub-menu apareça abaixo do menu principal, e não em cima.

Segue meu código:

HTML

<div id="menu">
 <ul>
 <li><a href="index.html" title="Página Inicial" class="home"><img src="imagens/home.png" alt="Página Inicial" /> Página Inicial</a></li>
 <li>
 <a href="interna.html" title="Consulta" class="consulta"><img src="imagens/consulta-branco.png" alt="Consulta" /> Consulta</a>
 <ul>
 <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 1</a></li>
 <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 2</a></li>
 <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 3</a></li>
 <li><a href="interna.html" title="Fórum"><img src="imagens/forum-mini.png" alt="Fórum" /> Sub-menu 4</a></li>
 </ul>
 </li>
 <li><a href="interna.html" title="Fórum" class="forum"><img src="imagens/forum-mini.png" alt="Fórum" /> Fórum</a></li>
 <li><a href="interna.html" title="Eventos" class="eventos"><img src="imagens/eventos-mini.png" alt="Eventos" /> Eventos</a></li>
 <li><a href="interna.html" title="Multimídia" class="multimidia"><img src="imagens/multimidia-mini.png" alt="Multimídia" /> Multimídia</a></li>
 <li><a href="interna.html" title="Sistemas" class="sistemas"><img src="imagens/sistemas-mini.png" alt="Sistemas" /> Sistemas</a></li>
 </ul>
 </div>

CSS

<style>
#menu{
 margin: -11px auto 0 auto; /* EDIT */
 width: 1024px;
 height: 35px;
 padding: 0 0 0 0;
}

#menu ul{

 list-style: none;
 position:relative; /* ADD */
 z-index:2; /* ADD */
}

#menu ul li{

 display: inline;
 cursor: pointer;
 margin: 0 0 0 0;
 list-style: none; /* ADD */
 float:left;
}

#menu ul li a{
display:block; / ADD /

 color: #FFFFFF;
 float:left;
 padding: 10px 15px 0 15px;
 margin: 0 0 0 0;
 height:26px;
}

#menu ul a:hover{ color: #1C5A8C; background: url('../imagens/menu-bg-hover.jpg') repeat-x;}
#menu ul .home img{ float:left; margin: 3px 6px 0 0;}

#menu ul li ul{

 margin: 0 0 0 0;
 padding: 0 0 0 0;
 background-color: #EBEBEB;
 float:left;
 position:absolute;
 z-index:1;
}

#menu ul li ul li{

 float:none;
 display:block;
 padding: 0 0 !important;
 border-top:1px solid #dbe2ec;
}

#menu ul li ul li a{

 color: #1B598C;
}
</style>

jQuery

$("#menu ul li ul").hide();
 $("#menu ul li").hover(
function(){ $(this).find("ul:first").slideDown("slow"); },
function(){ $(this).find("ul:first").slideUp("slow"); }
 );

Já estou a horas tentando resolver isso e nada, tentei position relative para o menu principal, e absolute para o submenu, porem ele fica no inicio do menu e não no final como esperado.

Peço a ajuda de vocês