Mensajes

[PD:]

Y la pregunta es...

PD: Falta el código CSS y JQuery,

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

[HTML]

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