重新编码飞出菜单功能，使父LI的“粘性”

Question

我需要一些帮助，以了解如何重新编码以下弹出式菜单功能：

var site = function() {
    this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
    this.init();
};

site.prototype = {  
    init : function() {
        this.setMenu();
    },

    setMenu : function() {
        $.each(this.navLi, function() {
            if ( $(this).children('ul')[0] ) {
                $(this)
                .append('<span />')
                .children('span')
                .addClass('hasChildren')
            }
        });

        this.navLi.hover(function() {
            $(this).find('> ul').stop(true, true).slideDown('fast');
            },
            function() {
            $(this).find('> ul').stop(true, true).hide();       
        });
    }
}

new site();

您可以在here 中看到它，看看它现在做了什么。一旦你看到它在行动，你会发现一旦你选择了一个子 LI，我就无法让父 LI 保持“粘性”。例如：Job Aides > Contacts > Approved Brokers ... 我的意思是父 LI 的（Job将鼠标悬停在子 LI（Approved Brokers）上时，助手和联系人）不会保持悬停状态。

我希望脚本执行的操作是在选择子 LI 时保持父 LI 处于悬停状态。看起来像这样：

关于我可以在上面粘贴的函数中调整什么的任何想法？提前非常感谢您！

更新

下面是我的 CSS 的副本（希望我没有弄得一团糟）：

/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}

#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}

#dnoa_nav li a, #dnoa_nav li {
float: left;
}

#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}

#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}

#dnoa_nav li:hover > ul {
display: block;
}

#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}

#dnoa_nav li ul li:hover > ul {
display: block;
}

#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

谢谢，

伯克利

Answer 1

我终于得到了我想要的工作方式...基于 Stack Overflow 人员帮助我指出正确方向的事实：需要调整的是 CSS，而不是 jQuery 函数。我最终重新学习了 CSS 选择器以及如何使用“大于”符号（“>”）将允许 CSS 仅直接影响父 UL 的直接子 LI ......而不是级联到每个另一个孩子 LI 和 UL（这是我在设计最顶部的 UL 和 LI 时遇到的问题）。因此，对这些语句进行了编辑以使其发挥作用：

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

被编辑为：

#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

还有这个：

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

被编辑为：

#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

再次感谢您带领我学习 CSS 选择器，

伯克利