jQuery: Show a div2 when mousenter over div1 is over

Question

I have a shopbasket, and I want to show a productlist, when I make a mousover over the basket-symbol. But when I leave the basket Logo with the mouse, to move the mouse into the list, the list disappears (logical). But what can I do that the list still is shown and only disappears when I move the mouse out of the listbox? Here is my code:

<div id="basket" style="padding:10px; background-color:#00458b;color:white;position:relative;cursor:pointer; width: 130px;z-index:1000;">Basket</div>
<div id="list" style="padding:10px; background-color:#63a0df;color:white;position:relative; width: 200px; display: none;z-index:1100;" >
<ul id="products">

</ul>
<button type="button" class="unset">Destroy</button> 

</div>

$('#basket').bind({
        mouseenter: function() {

        $("#list").fadeIn("slow", function() {

        });
        },
        mouseleave: function() {
        $("#list").fadeOut('fast');
        }
    });

Answer 1

Wrap your blocks into common div so that the #list still visible untill you out from that common div

Try this way

<div id="basket" >
<div style="padding:10px; background-color:#00458b;color:white;position:relative;cursor:pointer; width: 130px;z-index:1000;">Basket</div>
<div id="list" style="padding:10px; background-color:#63a0df;color:white;position:relative; width: 200px; display: none;z-index:1100;" >
</div>

DEMO