JQuery slideout panel on hover

Hi everyone,

So basically what I am trying to do here is make a navigation system for a website. I want to have a series of buttons that drop down a large panel with info and furhter links when you mouseover them, kind of like the Unilever site: http://unilever.com/ (mouseover the arrows to the side of “About us”, Our Brands", etc).

So I followed WebDesignerWall’s Simple slide panel tutorial (http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/, which is basically exactly what I am after - except that I want to have the slide out/slide back happen on a mouseover/mouseout.

The code I used looks like so:

$(document).ready(function(){

	$(".btn-slide").mouseover(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	$("#panel").mouseout(function(){
		$("#panel").slideToggle("slow");
		$(".btn-slide").toggleClass("active"); return false;
	});
	
	 
});

It kind of works but is pretty easily broken in a way that you couldn’t just put up with. The slider sometimes repeatedly slides in and out, apparently all by itself, and the panel is sometimes stuck open when the mouse is nowhere near it - and therefore technically should be be hidden.

I also tried the same thing using hover rather than mouseover, but unfortunately that breaks it even worse, since I want the panel to stay open when the user’s mouse is within the panel area, not just within the button.

So I’m wondering if anyone can offer me any suggestions as to how to get this to work, or even just an alternative way to achieve a simliar effect? I do like the sliding animation but I’m willing to forgo that for reliable functionality.

Thanks in advance for any help!