jquery animation not working correctly
<p>Ok, so I have a navigation bar and a trigger with the same class and my thought is that when the trigger is hovered, jquery will send into animation the moving of both the trigger and the nav bar which is hidden through overflow on the bottom of the page.</p>

<p>I got the jquery animate, but my problem is that when I hover over the trigger and then move to the navigation bar with the same class, it sends into motion the hiding of the bar again instead of staying open because I'm hovering over it.  I'm not sure how to get both the trigger and nav bar to stay still once open until I'm not hovering over either item.</p>

<p>Here's the basics (operating in wordpress that's why jQuery over $):</p>

<pre><code>jQuery(document).ready(function() {

    jQuery('.nav').hover(function() {
        jQuery('.nav').animate({
            bottom: "0px"
        }, 1500);
    }, function() {
        jQuery('.nav').animate({
            bottom: "-40px"
        }, 1500);
    });        
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="nav nav-trigger" id="nav-trigger"&gt;&lt;a href="#"&gt;Navigate&lt;/a&gt;&lt;/div&gt;
&lt;div class="nav" id="nav-bar"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.nav {position:absolute; bottom:-40px;}
.nav-trigger {margin-left:50%; left:-100px;}
#nav-trigger {height:80px; width:200px; background:#bd265e; color:#fff;}
#nav-bar {height:40px; width:100%; background:#bd265e; color:#fff; text-align:center;}
</code></pre>
