Menú desplegable HTML + CSS + JQuery (ayuda)

[SanMagic]

Buen día.

Buscando en Google sobre este tema me encontré un tutorial muy bueno d como hacer esto, donde básicamente el código es el siguiente:

HTML

Código [Seleccionar] Expandir


       <div class="menu">
           <ul>
               <li><a href="#">Menú 1</a>
                   <ul>
                       <li><a href="#">Menú 1.1</a>
                           <ul>
                               <li><a href="#">Menú 1.1.1</a></li>
                               <li><a href="#">Menú 1.1.2</a></li>
                           </ul>
                       </li>
                       <li><a href="#">Menú 1.2</a>
                           <ul>
                               <li><a href="#">Menú 1.2.1</a></li>
                               <li><a href="#">Menú 1.2.2</a></li>
                           </ul>
                       </li>
                   </ul>
               </li>
               <li><a href="#">Menú 2</a>
                   <ul>
                       <li><a href="#">Menú 2.1</a>
                           <ul>
                               <li><a href="#">Menú 2.1.1</a></li>
                               <li><a href="#">Menú 2.1.2</a></li>
                           </ul>
                       </li>
                       <li><a href="#">Menú 2.2</a>
                           <ul>
                               <li><a href="#">Menú 2.2.1</a></li>
                               <li><a href="#">Menú 2.2.2</a></li>
                           </ul>
                       </li>
                   </ul>
               </li>
               <li><a href="#">Menú 3</a></li>
               <li><a href="#">Menú 4</a></li>
           </ul>
       </div>


CSS

Código [Seleccionar] Expandir


       <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;
           }      
       </style>


JQuery

Código [Seleccionar] Expandir


       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
       <script>
           $(document).ready(function() {
               $('.menu ul ul').css({
                   display:"none"
               });
     
               $('.menu li').hover(function(){
                   $(this).find('> ul').stop(true, true).slideDown('slow');
               }, function(){
                   $(this).find('> ul').stop(true, true).slideUp('slow');
               });
           });
       </script>


Todo eso me deja el menú de la siguiente manera (suponiendo q está desplegado por completo):

Menú 1
Menú 1.1
Menú 1.1.1
Menú 1.1.2
Menú 1.2
Menú 1.2.1
Menú 1.2.2
Menú 2
Menú 2.1
Menú 2.1.1
Menú 2.1.2
Menú 2.2
Menú 2.2.1
Menú 2.2.2
Menú 3
Menú 4

Pero lo que yo deseo es que quede de la siguiente manera (suponiendo q está desplegado por completo):

Menú 1      | Menú 2    | Menú 3 | Menú 4
Menú 1.1      Menú 2.1
Menú 1.1.1   Menú 2.1.1
Menú 1.1.2   Menú 2.1.2
Menú 1.2      Menú 2.2
Menú 1.2.1   Menú 2.2.1
Menú 1.2.2   Menú 2.2.2

En otras palabras... solo q el primer nivel del menú se encuentre horizontal y los demás q sean verticales.

Desde ahora agradezco su ayuda.

Editando: Lo lamento, envíe sin querer el post incompleto

[Shell Root]

Y la pregunta es...

PD: Falta el código CSS y JQuery,

[SanMagic]

Y la pregunta es...

PD: Falta el código CSS y JQuery,

Perdón x error envié el post incompleto, ya esta =)

[#!drvy]

Hola,

Al css, añade estas lineas al final de tu CSS.

Código (css) [Seleccionar] Expandir


           /* Esto hara que se se alineen en una linea */
           .main {float:left;}
           /* Para evitar que se superponga, limpiamos los float. */
           .clear {clear:both;}

Y en tu html, cambia el li de los títulos de los menús así:

Código (html4strict) [Seleccionar] Expandir

<li class="main"><a href="#">Menu 1</a>

Osease, les añades como class,"main".


Ejemplo de como quedaría:


Al final de todo el menú (cuando termina el div "menu") pon otro div con clase "clear". Así te evitas problemas con los float..

Saludos

[SanMagic]

Hola,

Al css, añade estas lineas al final de tu CSS.

Código (css) [Seleccionar] Expandir


/* Esto hara que se se alineen en una linea */
.main {float:left;}
/* Para evitar que se superponga, limpiamos los float. */
.clear {clear:both;}

Y en tu html, cambia el li de los títulos de los menús así:

Código (html4strict) [Seleccionar] Expandir

<li class="main"><a href="#">Menu 1</a>

Osease, les añades como class,"main".


Ejemplo de como quedaría:


Al final de todo el menú (cuando termina el div "menu") pon otro div con clase "clear". Así te evitas problemas con los float..

Saludos

Wow!! Muchisimas gracias =D había intentado otras cosas y nada me había funcionado, muchisimas gracias!!! =D

Solo una dudita más... eso de poner el div con la clase "clear" es dejarlo sin dada dentro del div?? osea así???

Código (html4strict) [Seleccionar] Expandir


<div class="clear"> </div>


[#!drvy]

Hola, si, es mas que nada para evitar que te rompa el diseño si usas float en otra parte.


Saludos

[SanMagic]

Una pregunta más... eso tendria q ponerlo para todas las páginas q tenga hasta el final o puede ir en cualquier parte del script??

[#!drvy]

Hola,

Tendrías que ponerlo al final del menú. Y en todas las paginas en las que este dicho menú.


Saludos

[SanMagic]

Muchas gracias  se ha resuelto el problema, pueden cerrar el tema si gustan

[SanMagic]

Bueno, aprovechando q no han cerrado el tema (y para evitarme tener q abrir otro) pregunto lo siguiente (referente a lo mismo)

Al hacer click en los menús q tienen fotos me aparece el siguiente error:



como ven se despliegan todos los sub-menús (los cuales deberían estar ocultos) pero esto es solo mientras se carga la página, al terminar la carga todo vuelve a la normalidad, como puedo evitar q pase lo de la imagen??