Создание выпадающего меню

$('.menu li, .submenu').hover(function() { 
  // определяем подменю 
  var $menu = $(this) 
  if (!$(this).hasClass("submenu")) { 
    $menu = $('.' + $(this).data("sub")) 
  } 
  // ставим флаг "в фокусе" 
  $menu.data('infocus', 1 ); 
  // показываем активное подменю 
  $menu.show().siblings('.submenu').hide(); 
   
}, function() { 
 
 // определяем подменю 
  var $menu = $(this) 
  if (!$(this).hasClass("submenu")) { 
    $menu = $('.' + $(this).data("sub")) 
  } 
  // ставим флаг "не в фокусе" 
  $menu.data('infocus', 0); 
  // скрываем активное подменю, с небольшой задержкой 
  setTimeout(function() { 
    if ($menu.data('infocus') == 0) $menu.hide(); 
  }, 10) 
 
})

.menu { 
  width: 100px; 
  float: left; 
  padding: 0; 
  margin: 0; 
   background:#eee; 
} 
 
.submenu { 
  display: none; 
  float: left; 
  background:#ccc; 
  padding:20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class=menu> 
  <li data-sub="submenu1">submenu1</li> 
  <li data-sub="submenu2">submenu2</li> 
</ul> 
 
<div class="submenu submenu1">submenu1</div> 
<div class="submenu submenu2">submenu2</div>