jQuery菜单悬停在所有内容上，但使用子菜单

Question

我目前有我的菜单，以便当我将鼠标悬停在一个项目上时，所有其他列表项目都会淡出。我有子菜单时遇到问题。当我将鼠标移动到子菜单时，我希望我（在子菜单中保留）的项目保持高亮显示。我不希望效果进入子菜单。我怎样才能让它发挥作用？

这是js小提琴http://jsfiddle.net/jfarr07/9bmjdryv/10/

的jQuery

var timeout = 0;
$('#mainNav li a').hover(function() {
    $(this).stop(true, true).addClass('hovered').fadeTo(100,1);
    fadeOutArticles();
}, function() {
    $(this).removeClass('hovered');
    fadeOutArticles();
});
function fadeOutArticles(){
    clearTimeout(timeout);
    $('#mainNav li a').not('.hovered').fadeTo(100,0.6, function(){
        timeout = setTimeout(function(){
            if($('#mainNav li a.hovered').length==0){
                $('#mainNav li a').stop(true,true).fadeTo(100, 1);
            }
        }, 0);
    });     
}