Question
I'd like to create a very simple horizontal navbar based on the following 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>
..it would show subnav (if exists) on mouseover.
I know about the great SuperFish plugin, but I'd like to keep it really simple here and not use any plugins if possible.
Many thanks!
Solution
This should get you started in the right 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>
Check this site for a demo http://jsbin.com/ejuxa
OTHER TIPS
If you don't want to use any plugins, why don't you just do it with CSS? Here is a link to the "Ultimate" CSS drop down menu. Why use javascript when it can easily be done in plain ol' CSS?
EDIT
Sorry here is the link: http://www.cssplay.co.uk/menus/final_drop.html
I just tested this in Firefox 3.5, Safari 4, IE8, and Chrome 3 and it worked fine in all of them.