jQuery hover (show-hide)

I work on popup menu in jQuery with show/hide. I want to make a green rectangle for my example clikable too.

Example: http://jsfiddle.net/Q5cRU/27/

  $(document).ready(function(){
$('.rectangle1').hide();

$('#rectangle').hover(function() {
    $('.rectangle1').show()
   },function() {
  $('.rectangle1').hide()
   });  
    });

Use an area for .rectangle1 inside:

<div class="rectangle1">
    <div class="rectangle1-area"></div>
</div>

Add a top padding to this area. So your areas will be gapless. Also you can add a display: none; to .rectangle1 instead of hiding it in JavaScript.

.rectangle1 {
    width: 140px;
    padding-top: 10px;
    display: none;
}
.rectangle1-area {   
   width: 100%; 
   height: 150px;
   background: #37CA90;
}

Use a count variable. So if your mouse is over #rectangle or .rectangle1 the var is 1. If mouseout - the var is 0 => hide .rectangle1

$(document).ready(function(){    
    var count = 0;
    $('#rectangle, .rectangle1').mouseenter(function() {
        count++;
        $('.rectangle1').show();
    });
    
    $('#rectangle, .rectangle1').mouseleave(function() {
        count--;
        if (count == 0) { 
            $('.rectangle1').hide();
        }
    });
});