Autor
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>
<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>
.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>
<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
En línea
se ha resuelto el problema, pueden cerrar el tema si gustan 
