Hola Kadas
a la segunda lista (ul li
ul) de tu menú deberías posicionarla absolutamente cuando la muestres ("position:absolute) y ajustar su posición con valores para "left" y "top" si fuese necesario.
Con el valor "absolute" lo que haces es que su existencia (cuando lo muestras) no influya en el resto de elementos.
Un par de apuntes no solicitados por ti:
En el html tienes un error. Todo lo que esté en una lista (ul) debe estar contenido en su respectivo li. O dicho de otra forma: el único elemento hijo directo de ul debe ser un li, y dentro de éste lo que quieras. Y tú tienes:
Código html:
Ver original ...
<ul><!-- este ul está fuera de un li --> ...etc
Segundo: en un vistazo rápido a tu css (y con los códigos que muestras) ya te adelanto que tu menú no funcionará en ie6. La razón: la pseudoclase ":hover" sólo la sabe aplicar a los enlaces y tú la aplicas a los li. Por ejemplo: "li:hover ul {...}
Tercero: lo más lógico y lo que cabría esperar en un menú es que el contenido de los li fuesen enlaces:
En las faq's de css tienes una amplia colección de menús por si quieres echarles un vistazo.
Un saludo