jQuery mouseover link to show hidden div not working on hover exactly

Question

I am trying to implement when a div1 is hovered div2 should be visible and options should be clickable. when div1 is mouse out it should not show div2

<div class="div1">Hover me</div>
<div class="div2">Clickable items</div>

.div1
{
  width:100px;
  height:30px;
  background:red;
}

.div2
{
  width:100px;
  background:blue;
  display:none;
  padding:10px;
}

$('.div1').hover(function()
{$('.div2').show()});
$('.div2').hover(function() 
  {}, function() {$('.div2').hide()}); 

This solution works partially, After the element is hovered and when the mouse is moved downwards it works fine. but when the mouse is moved upwards it doesnt dissepear sub menu.

here is the pen http://codepen.io/anon/pen/KwWGVq

Answer 1

Your jQuery is wrong, see below:

$('.div1, .div2').hover(function(){

    $('.div2').show();

}, function(){

    $('.div2').hide();

});