Реализация выпадающего меню
 

Добрый день. Столкнулся с проблемой при реализации выпадающего меню.
Суть проблемы такова. При наведении на родительский пункт меню, по средствам 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>

waterfly,
вариант добавить

$(".js-dropnav-active .nav-bar__item").mouseenter(function() {
    $("li.dropnav-menu__item:first", this).mouseenter();
})

Сделал по Вашему совету

$(document).ready(function(){

$(".js-dropnav-active li.dropnav-menu__item").hover(function(){
    $("li.dropnav-menu__item:first", this).mouseenter();
	$(".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){
			$("#games-"+link).html(result);
		},
		beforeSend: function(){
			var imgProc = '<div class="loading"></div>';
			$("#games-"+link).html(imgProc);
		}
	});
	return false;
});

});

Теперь получаю такой эфект пошагово:
1. При наведении на родителя запрос не передается.
2. При наведении на первый пункт меню запрос уходит/приходит.
3. Возвращаю курсор на родителя - запрос уходит/приходит.

waterfly,
;) добавить а не вставить

$(function() {
         $(".js-dropnav-active li.dropnav-menu__item").hover(function(event) {
             $(".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;
         });
         $(".js-dropnav-active .nav-bar__item").mouseenter(function() {
             $("li.dropnav-menu__item:first", this).mouseenter();
         })

     });

Чем дальше, тем запутанее)
теперь...
1. Родитель - раскрывается меню. (запроса - нет)
2. Подпункт №1 - уходит один запрос/ответ.
3. Подпункт №2 - уходят два запроса/ответа ( подпункта №2 и №3 ).
3. Подпункт №3 - уходят два запроса/ответа ( подпункта №3 и №4 ).
5. Возвращаемся на родителя уходит запрос/ответ №1.

waterfly,
может вам ограничение сделать - посылать только 1 запрос а не при каждом наведении.

Уже думал над этим но мои знания js пока не позволяют а если и позволят будет две страницы кода.:)
Не решает проблемы с родителем.