Hola,
Fallo técnico
Teóricamente, no puedes cambiar el css de un elemento que todavía no existe, Por tanto, ya se tendría que haber cargado antes de cambiarle el css.
3 Soluciones.1. (Recomendado) Añadir un nuevo style mediante javascript. Así evitamos el problema de que los visitantes que no tengan javascript no puedan ver el menú.
2.Poner al final de menú un script que oculte los submenus. 3. Manejarlo desde el css. El problema aquí es que cuando un visitante sin javascript visite tu pagina, no podrá desplegar el menú. De por si el visitante no tiene javascript, el menú aparecerá desplegado entero.
1. > Para añadir, un nuevo estilo en jquery haces lo siguiente.
$("<style type='text/css'></style>").appendTo("head");
Entonces tu código javascript quedaría de la siguiente forma.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>
$("<style type='text/css'>.menu ul ul{display:none;}</style>").appendTo("head");
$(document).ready(function() {
$('.menu li').hover(function(){
$(this).find('> ul').stop(true, true).slideDown('slow');
}, function(){
$(this).find('> ul').stop(true, true).slideUp('slow');
});
});
</script>
2. > Con añadir una linea de js al final del menú (donde termina el div menú) bastara. Aunque puede que tarde algo en reaccionar y se siga viendo todo despegado. Pero seria un mínimo de tiempo (mili segundos como mucho 1 segundo).
<!-- Menu entero -->
3. > Añadir la siguiente linea en el css.
.menu ul ul {display:none;}
Tu css quedaría así:
<style>
.menu ul {list-style: none; padding: 0;}
.menu a {display: block;width: 150px;height: 20px; background: red; color: white;text-decoration: none;text-align: center;}
.menu a:hover {background: green;}
.menu li li a {background: blue;}
.main {float:left;}
.clear {clear:both;}
.menu ul ul {display:none;}
</style>
Salio largo el post
Saludos
Autor
En línea
