Erro ul dentro da Div

[1Du1]

Eae galera, estou com uma dúvida. Fiz um menu dentro de uma div só que ele está ficando fora da div, sendo que o tamanho da div e o da ul são os mesmos.

Seguem os códigos abaixo

<div id="menuEsquerdo">
        <ul id="nav">
              <li><a href="#">Aeromodelos</a>
                <ul>
                      <li><a href="#">Jatos</a></li>
                     <li><a href="#">Acrobáticos</a></li>
                      <li><a href="#">Elétricos</a></li>
                    <li><a href="#">Escala</a></li>
                    <li><a href="#">Planadores</a></li>
                    <li><a href="#">Helicópteros</a></li>
                   </ul>
              </li>
              <li><a href="#">Acessórios</a>
                <ul>
                      <li><a href="#">Sistema Pneumático</a></li>
                      <li><a href="#">Sistema de Combústivel</a></li>
                    <li><a href="#">Trem de Pouso</a></li>
                </ul>
             </li>
            <li><a href="#">Eletrônica</a>
                <ul>
                      <li><a href="#">Baterias</a></li>
                      <li><a href="#">Carregadores</a></li>
                      <li><a href="#">Conectores</a></li>
                     <li><a href="#">Extensões</a></li>
                    <li><a href="#">Servos</a></li>
                    <li><a href="#">Rádios</a></li>
                    <li><a href="#">Acessórios</a></li>
                    </ul>
               </li>
              <li><a href="#">Motores</a>
                <ul>
                      <li><a href="#">Elétrico</a></li>
                      <li><a href="#">Glow</a></li>
                      <li><a href="#">Gasolina</a></li>
                    <li><a href="#">Turbina</a></li>
                    <li><a href="#">Peças</a></li>
                    <li><a href="#">Acessórios</a></li>
                    </ul>
              </li>
             <li><a href="#">Serviços</a>
                <ul>
                      <li><a href="#">Montagem</a></li>
                      <li><a href="#">Manutenção</a></li>
                      <li><a href="#">Reparos</a></li>
                    </ul>
              </li>
        </ul>
      </div>

CSS

#menuEsquerdo {
    width: 200px;
    float: left;
    margin-top: 30px;    
}
#menuEsquerdo ul {
    list-style:none;    
}
#nav {
    float: left;
    width: 200px;
    font-family: Verdana, Geneva, sans-serif;
}
#nav li a {
    display: block;
    padding: 10px 15px;
    background: #F30;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #999;
    text-decoration: none;
    color: #000;
}
#nav li a:hover, #nav li a.active {
    background: #F60;
    color: #fff;
}
#nav li ul {
    display: none; // used to hide sub-menus
}
#nav li ul li a {
    padding: 10px 25px;
    background: #ececec;
    border-bottom: 1px dotted #ccc;
}

O menu está ficando assim

http://imageshack.us/photo/my-images/100/menuerror.jpg/

Queria que ele ficasse no canto da div e não estou conseguindo de jeito nenhum.

[Nosreve]

muito simples,

testei aqui e deu certo!

antes de qualquer coisa no CSS, coloque isso...

*{

margin:0;

padding:0;

}