Orizzontale Navbar (jQuery)

Question

Mi piacerebbe creare un semplice barra di navigazione orizzontale in base alla seguente codice 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>

.. mostrerebbe subnav (se esiste) al passaggio del mouse.

So del ottimo plugin Superfish, ma mi piacerebbe tenerlo molto semplice qui e non utilizzare alcun plugin, se possibile.

Molte grazie!

Answer 1

Questo dovrebbe iniziare nella giusta direzione

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

Controlla questo sito per un http://jsbin.com/ejuxa

Answer 2

Se non si desidera utilizzare alcun plugin, perché non lo fai e basta con i CSS? Ecco un link al calo CSS "Ultimate" menu a discesa. Perché usare javascript quando può facilmente essere fatto in CSS pianura ol'?

Modifica

Spiacenti ecco il link: http://www.cssplay.co.uk /menus/final_drop.html

Ho appena provato questo in Firefox 3.5, Safari 4, IE8 e Chrome 3 e ha funzionato bene in tutti loro.