Con este código funciona
Código HTML:
#menu { background:#93d22b; width:100%; float:left; font-size:1.2em; list-style: none;}
#menu a { color: #fff;float:left; text-decoration: none; font-weight: bold;}
#menu a:hover { color: #fff;}
#menu li { float:left; padding: 10px 20px; position:relative;}
#menu li:hover {background:#B3EE44;}
#menu li ul {display:none; position:absolute; left:0;}
#menu li li {list-style:none;}
#menu li:hover > ul {display:block;}
#menu li ul {background:#B3EE44; margin-top:32px; position:absolute; border-radius:0px 0px 10px 10px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px;}
No tengo mucho tiempo, pero te digo un par de cosas que he cambiado y luego tú lo miras más a fondo.
He quitado el nav, porque cuando expandías el submenú solo bajaba hasta el tamaño del nav.
He cambiado la línea #menu li a:hover ul por #menu li:hover > ul en lugar de cuando esté encima del link cuando esté encima de li y un ">" para indicar que lo aplique sobre la propiedad ul.