Hiding shopping cart when hovering away from both cart and the tab that opened it
<p>I implemented a shopping cart using two divs. A 'cart' div that contains the cart image and 'cart_items' div containing cart items.
I can make cart_items slideDown when clicking on the cart image. I can hide cart_items when hovering it then leaving it, the problems I have are:</p>

<ol>
<li>I can not hide cart_items when clicking the cart then mouseleaving it without entering cart_items.</li>
<li>I can not hover over both, cart and cart_items without preventing cart_items from hiding.</li>
</ol>

<p>cart and cart_items are in two adjacent divs.</p>

<p>HTML</p>

<pre><code>&lt;div id='header'&gt;
    &lt;div id='cart'&gt;&lt;img src='cart.png'&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div id='container'&gt;
    &lt;div id='cart_items'&gt; contain items that will be pulled from database &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code> $('#cart').click(function(){
    $('#cart_items').slideDown("300");
 });

 $('#cart_items').mouseleave(function(){
    $('#cart_items').hide();
 });
</code></pre>

<p>I did lots of online search and I added many jQuery mouseenter and mouseleave to both divs but somehow the events were cancelling each other.</p>
