Barra de navegación horizontal (jQuery)

Question

Me gustaría crear una barra de navegación horizontal muy simple basada en el siguiente HTML:

<div id="nav">
    <ol class="clear">
        <li><a href="#">Parent 1</a></li>
        <li><a href="#">Parent 2</a>
            <ul class="clear">
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
            </ul>   
        </li>
        <li><a href="#">Parent 3</a></li>
     </ol>
</div>

..mostraría subnav (si existe) al pasar el mouse.

Conozco el excelente complemento SuperFish, pero me gustaría mantenerlo realmente simple aquí y no usar ningún complemento si es posible.

¡Muchas gracias!

Answer 1

Esto debería ayudarle a empezar en la dirección correcta

$(document).ready(function() {
    $("div#nav > ol.clear > li > ul").hide();
    $("div#nav > ol.clear > li:has(> ul)").hover(function() {
        var x = $(this);
        x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
    }, function () {
        $(this).children("ul").eq(0).hide();
    });
});

<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>

Consulte este sitio para ver una demostración http://jsbin.com/ejuxa

Answer 2

Si no desea utilizar ningún tipo de plugins, ¿por qué no acaba de hacerlo con CSS? Aquí hay un enlace a la "última" gota CSS menú desplegable. ¿Por qué usar javascript cuando se puede hacer fácilmente en CSS ol llano'?

Editar

Lo sentimos aquí está el enlace: http://www.cssplay.co.uk /menus/final_drop.html

Acabo de probar esto en Firefox 3.5, Safari 4, IE8 y Chrome 3 y funcionó bien en todas ellas.