Сохранение стиля CSS родительского элемента при зависании его дочерних элементов

Question

Я создал навигацию с меню, когда вы наводили курсор в разделе, на котором отображается синяя линия. Моя проблема заключается в том, что внутри раздела есть подменю, и я хочу, чтобы при наведении курсора в секции подменю (дочерний элемент) родитель все еще отображает синюю линию, которая все еще витает.

//Display Submenu 
$('nav .submenu').hover(function() { 
    $(this).children('ul').animate(
     {'height':'toggle'}, 600, 'swing' 
    ); 
}); 

//Blue Line animation 
$('nav ul > li a').hover(function(){ 
    $(this).next('.blueLine').animate(
     {'width':'100%'}, 200, 'linear') 
},function(){ 
    $(this).next('.blueLine').animate(
     {'width':'0'}, 200, 'linear');  
}); 

Here's a working fiddle

Answer 1

Если вы держите HTML структуру, как в вашем примере, то вы можете попробовать это:

$('nav ul > li a').hover(function(){ 
    $(this).next('.blueLine').stop().animate(
    {'width':'100%'}, 200, 'linear'); 
    $(this).closest('ul').prev().stop().css('width','100%'); 
},function(){ 
    $(this).next('.blueLine').stop().animate(
    {'width':'0'}, 200, 'linear'); 
    $(this).closest('ul').prev().stop().animate(
    {'width':'0'}, 200, 'linear'); 
}); 

JSFiddle