horizontale Navbar (jQuery)

Question

Je voudrais créer une barre de navigation horizontale très simple 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> 

..il montreraient subnav (si elle existe) sur mouseover.

Je connais le super plugin SuperFish, mais je voudrais le garder très simple ici et ne pas utiliser de 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> 

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

Answer 2

Si vous ne voulez pas utiliser de plugins, pourquoi ne pas le faire avec CSS? Voici un lien vers le menu déroulant "Ultimate" CSS. Pourquoi utiliser javascript quand il peut facilement être fait en plaine ol 'CSS?

EDIT

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

Je viens de tester cela dans Firefox 3.5, Safari 4, IE8 et Chrome 3 et il a bien fonctionné dans tous.