Horizontale de la barre de navigation (jQuery)

Question

J'aimerais créer un très simple horizontale de la barre de navigation basé sur le code HTML suivant:

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

..ce serait montrer subnav (s'il existe) sur passage de la souris.

Je sais au sujet de la grande SuperFish plugin, mais je tiens à le garder très simple ici, et ne pas utiliser tous les plugins, si possible.

Merci beaucoup!

Answer 1

Cela devrait vous aider à démarrer dans la bonne direction

$(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>

Consultez ce site pour une démonstration http://jsbin.com/ejuxa

Answer 2

Si vous ne voulez pas utiliser de plugins, pourquoi ne pas vous venez de le faire avec du CSS?Voici un lien pour "l'Ultime" CSS drop down menu.Pourquoi utiliser du javascript quand il peut facilement être fait dans la plaine ol' CSS?

MODIFIER

Désolé, voici le lien: http://www.cssplay.co.uk/menus/final_drop.html

Je viens de tester ce dans Firefox 3.5, Safari 4, IE8 et Chrome 3 et il a bien fonctionné dans tous les d'entre eux.