jquery .parent（）以ul的父li为目标

Question

嗨，我只是学习jQuery

因此，基本上，我会使用下拉菜单进行导航。

我的问题是我将导航鼠标悬停在背景编号222上，但是一旦将鼠标移到现在已经下拉的菜单上，悬停效果就会消失。

这是jQuery

$('.navi li ul').each(function() {
    $(this).hover(
    function() {
        $(this).parent('li').css({ 'background-color' : '#222',
                               'color' : '#FFFFFF'});
    },
    function() {
        $(this).parent('li').css({ 'background-color' : '',
                               'color' : '#0085ac'
                             });
    });
}); //end ul parrent hover

的HTML是

            <ul class="navi">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Portfolio</a>
                    <ul>
                        <li><a href="#">logos</a></li>
                        <li><a href="#">Business Cards</a></li>
                        <li><a href="#">Websites</a></li>
                    </ul>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#" style="background-image:none;">Contact</a></li>
            </ul>

如您所见，我的ul内装有ul，基本上，我希望父级li在浏览下拉菜单时保持其悬浮状态。

奖励积分，如果您可以告诉我如何在悬停状态变回正常状态之前对其进行250ms的延迟

编辑：只是为了澄清，上面的jquery无法使我的父母li保持其悬停状态

Answer 1

$(document).ready(function(){
    $( ".navi li" ).has( "ul" ).mousemove(function(){
    $(this).css('background','#222');
    });
    $( ".navi li" ).has( "ul" ).mouseleave(function(){
    $(this).css('background','#fff');
    });
});

并避免与：hover在CSS中发生任何冲突，只需添加！important

.navi li:hover{
   background : #222 !important;
}