Горизонтальные Navbar (JQuery)

Question

Я хотел бы создать очень простую горизонтальную Navbar на основе следующего 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> 

..Это покажет subnav (если есть) при наведении курсора мыши.

Я знаю о великолепном плагине SuperFish, но я бы хотел, чтобы это было очень просто, и, если это возможно, не используйте никаких плагинов.

Большое спасибо!

Answer 1

Это должно вам начать в правильном направлении

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

Проверьте этот сайт для демонстрации http://jsbin.com/ejuxa

Answer 2

Если вы не хотите использовать какие-либо плагины, почему бы вам просто не сделать это с помощью CSS? Вот ссылка на раскрывающееся меню «Ultimate» CSS. Зачем использовать javascript, когда это можно легко сделать с помощью простого CSS?

EDIT

К сожалению вот ссылка: http://www.cssplay.co.uk/menus/final_drop.html

Я только проверил это в Firefox 3.5, Safari 4, IE8 и Chrome 3 и он работал отлично во всех из них.