centralizar menu usando float:left

salve pessoal...

tenho um menu com submenu simples, só que não consigo centralizar o mesmo, pois estou usando float:left, e se eu tiro o float tenho que definir uma altura para a ul, mas o menu funciona só que o submenu fica bagunçado..

se alguem puder ajudar.

segue o html do menu:

<section id="menu">
 <nav id="menu-interno">
 <ul>
 <li>
 <a href="inicio" title="">Início
 <p>Página inicial</p>
 </a>
 </li>
 <li>
 <a href="desenvolvimento-web" title="">Desenvolvimento web
 <p>Linguagens de programação</p>
 </a>
 <ul>
 <li><a href="" title="ASP">ASP</a></li>
 <li><a href="" title="C#">C#</a></li>
 <li><a href="" title="HTML">HTML</a></li>
 <li><a href="" title="JAVA">JAVA</a></li>
 <li><a href="" title="JQUERY">JQUERY</a></li>
 <li><a href="" title="PHP">PHP</a></li>
 </ul>
 </li>
 <li>
 <a href="design" title="">Design / Criação
 <p>Desenvolvimento de arte e criação</p>
 </a>
 <ul>
 <li><a href="" title="Corel Draw">Corel Draw</a></li>
 <li><a href="" title="Illustrator">Illustrator</a></li>
 <li><a href="" title="Flash">Flash</a></li>
 <li><a href="" title="Fireworks">Fireworks</a></li>
 <li><a href="" title="Photoshop">Photoshop</a></li>
 </ul>
 </li>
 <li>
 <a href="banco-de-dados" title="">Banco de dados
 <p>Linguagem SQL</p>
 </a>
 </li>
 <li>
 <a href="contato" title="">Contato
 <p>Entre em contato conosco</p>
 </a>
 </li>
 </ul>
 </nav><!-- menu-interno -->
	</section><!-- menu -->

e esse é o css do menu:

#menu { float: left; margin: 15px auto; width: 100%; }

#menu-interno ul {

 background: -webkit-linear-gradient(top, #fff, #e1e1e1);
background: -moz-linear-gradient(top, #fff, #e1e1e1);
background: -ms-linear-gradient(top, #fff, #e1e1e1);
background: -o-linear-gradient(top, #fff, #e1e1e1);
background: linear-gradient(top, #fff, #e1e1e1);
border: 1px solid #ccc;
 float: left;
 margin: 0 auto;
 width: 998px;
}

#menu ul li ul:last-child { border-bottom: none; }

#menu li {

border-left: 1px solid #f4f4f4;
border-right: 1px solid #ccc;
float: left;
position: relative;
}

#menu li a {

color: #333;
display: block;
font: bold 18px Georgia, 'Times New Roman', Times, serif;
padding: 35px 10px;
text-decoration: none;

-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
}

#menu ul li a p { color: #666; font: 14px Arial, Helvetica, 'sans-serif'; }

#menu li:hover {

background: #fff;
color: #000;

-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
}

#menu li:first-child { border-left: none; }
#menu li:last-child { border-right: none; }

#menu li ul {

 left: -99999em;
 position: absolute;
 top: 100%;
 width: 250px;
}

#menu li:hover ul { left: -2px; z-index: 2; }
#menu li ul li a { border-bottom: 1px solid #ccc; font: 14px Arial, Helvetica, sans-serif; padding: 15px 10px; }
#menu li ul li:last-child { border-bottom: none; }
#menu li ul li { border-left: none; border-right: none; width: 100%; }
#menu li ul li ul { display: none; }

#menu li ul li:hover ul {

display: block;
float: left;
left: 250px;
position: absolute;
top: -1px;
}

só pra constar, resolvi o problema, mas acho que deva existir uma forma mais inteligente de resolver isso..

meu html ficou assim:

<section id="menu">
 <section id="menu-centraliza">
 <nav id="menu-interno">
 <!-- aqui vem o menu de lista não ordenada -->
 </nav>
 </section>
<section>

e no css fiz assim, na #menu-centraliza:

#menu-centraliza {
 margin: 0 auto;
 width: 1000px;
}