I have made a small dropdown menu with jQuery and have binded the "show" and "hide" animation on the mouseover/mouseout events. The problem is that when I hover the mouse on the menu list item(s) in my dropdown, the events are trigged and my menu disappears!

I have also tried `stopPropagation()` which also failed:

```
$('nav>div.dropTrigger').mouseover(function(e)
{
    console.log("enter");
    $(this).find('div').stop(true,true).animate({ opacity: 'show', height: 'show' },"fast");        
}); 

$('nav>div.dropTrigger').mouseout(function(e)
{   
    console.log("out");
    $(this).find('div').stop(true,true).animate({ opacity: 'hide', height: 'hide' },"fast");        
});

$('.dropdown').mouseover(function(e)
{
    e.stopPropagation();
});

$('.dropdown').mouseout(function(e)
{
    e.stopPropagation();
});

```

My markup:

```
<nav>
   <div class="dropTrigger">
      <a href="potatoes">some menu</a>
       <div class="dropdown">
          <ul>[drop menu goes here]
       </div>
 ...

```