Bienvenido a FDW.
Deberían de enmarcar tu post con una leyenda debajo que diga "cómo postear un duda en un foro".
Lo primero que deberías de hacer, es darle una posición relativa a los primeros items del menú. Es decir, los
LI principales. Porque al darle posición absoluta al submenú, tiene posición absoluta
respecto al resto del documento HTML, es decir, toda la página. Añadiéndole una posición relativa al padre, lo que consigues es que la posición absoluta del hijo sea relativa a la posición del padre y no a la página.
Igual no notas diferencia nada más cambiar esto, porque el submenú te seguirá saliendo justo arriba. Que es el problema que tienes, que más abajo se resuelve.
Yo personalmente añadiría el selector > a la regla. Así atributos y propiedades que le des a
LI, sólo se aplicarán para los hijos directos de ul#menu. Prefiero hacerlo así porque luego no tengo que
resetear reglas en los
LI del submenú.
Los enlaces
A dentro de
LI no hacen falta que estén flotados. Ya que quienes flotan son los LI. Basta con dejarlos como elementos de bloque.
Código CSS:
Ver originalul#menu a {
display:block;
float:left; /* <-- No hace falta */
}
Y no sólo que no haga falta, sino que
es realmente la causa del problema. Piensa que tienes un enlace flotando, y a continuación el submenú UL. Para hacer que salga justo por debajo, tendrías que limpiar el flotado con
clear:left para que lo siguiente —el submenú— salga por debajo.
Pero como no hace falta que flote, con quitarlo se resuelve el problema.
Otra cosa que vi en algún sitio del código. Cuando flotas un elemento, este se convierte automáticamente en un elemento en bloque. Sería redundante especifar un
float:left junto a un
display:block.