últimos mensajes de: 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:

        <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:

        <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:

        <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