[waterfly]

Добрый день. Столкнулся с проблемой при реализации выпадающего меню.
Суть проблемы такова. При наведении на родительский пункт меню, по средствам CSS, раскрывается подменю. А при наведении курсора на ссылки в подменю, начинают подтягиваться материалы (ajax) в div в этом же подменю. Как реализовать загрузку материалов в первый пункт подменю уже при наведении курсора на родительский пункт меню.

$(".js-dropnav-active li.dropnav-menu__item").hover(function(){
	$(".js-dropnav-active li.dropnav-menu__item").removeClass("dropnav-menu__active");
    $(this).addClass("dropnav-menu__active");
	var link = $(this).attr('id');
	var data = 'data='+link;
	$.ajax({
		url: 'components/drop-menu/items.php',
		type: 'POST',
		data: data,
		dataType: 'html',
		success: function(result){
			$("#ajax-"+link).html(result);
		},
		beforeSend: function(){
			var imgProc = '<div class="loading"></div>';
			$("#ajax-"+link).html(imgProc);
		}
	});
	return false;
});
});

<ul class="nav-bar">
<li class="nav-bar__item dropnav js-dropnav">
<a href="#">Родительский пункт меню</a>

<ul class="dropnav-menu">
<li id="pc" class="dropnav-menu__item dropnav-menu__active">
<a href="#">Первый пункт подменю</a>
<ul class="dropnav-submenu">
<div id="ajax-pc"></div>
</ul>
</li>

<li id="pr" class="dropnav-menu__item ">
<a href="#">Второй пункт подменю</a>
<ul class="dropnav-submenu">
<div id="ajax-pr"></div>
</ul>
</li>

</ul>

</li>
  </ul>