Jquery - show/hide on hover events for two elements conflict

Jquery - show/hide on hover events for two elements conflict

This question is fairly straight forward but I'm unable to find good
relevant example to solve my issue. I have a menu bar that when a user
mouseovers an item, a submenu div appears.
http://jsfiddle.net/Sx9J2/3/
HTML
<div class="nav">
<a href="#">MENU ITEM</a>
</div>
<div class="box">
THIS IS THE BOX
</div>
JS
$(document).ready(function(){
$(".nav a").hover(
function(){
$(".box").show();
}, function() {
if (!$(".box").is(":hover")) $(".box").hide();
}
);
$(".box").mouseleave(function() {
$(this).hide();
});
});
The code above works in many cases but I have seen times in my testing
when the div would hide even with the mouse over it. My guess is that
there must be some sort of conflict between the events.
What is a better way to tackle this sort of visual effect?