jQuery drop down

This does the job, and it's pretty much all the functionality I need at the moment. However, I feel like it could be optimized a bit. Namely, is there a way I can do this without the div#boundary? Also, the drop down re-fires if I go back up into the menu, which not a big deal, but it would be nice to prevent this behavior.

Demo



$('#press, #contact, #about').bind('mouseenter', function() {
var n = $(this).attr("id");
$('#dd_'+n).stop(true, true).slideDown('fast');

$('#menu').children().not('#'+n).bind('mouseenter', function () {
$('#dd_'+n).slideUp('fast');
});

$('#boundary').bind('mouseenter', function () {
$('#dd_'+n).slideUp('fast');
});

$('#dd_'+n).bind('mouseleave', function () {
$('#dd_'+n).slideUp('fast');
});

});















I've come up with two options, but I'm not sure if either are an acceptable replacement for you.

Option 1

Overlay the expanding menu on the original menu. This allows simplification of the eventing. Only tricky part is that by moving quickly, you could leave one menu and enter another before your mouse was in the expanding menu. Hence the last line of the "mouseover" function. Also, the original menu basically must be duplicated between the two menus, as you are overlaying it. If you were going to have some sort of effect on the original menu anyway, this could be an OK thing.

http://jsfiddle.net/KY2kY/1/

Option 2

Add everything to the header menu, but hide most of it. Expand and contract that element. Biggest downside here is that now your heights must be set in the code, not the CSS. But it is very, very clean.

http://jsfiddle.net/KY2kY/2/

StackExchange Code Review Q#8509, answer score: 2