Re-code fly-out menu function to make parent LI's "sticky"

Question

I'd like some help figuring out how to re-code the following fly-out menu function:

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();

You can see it in action here to see what it does right now. Once you see it in action, you'll see that I cannot get the parent LI's to remain "sticky" once you have chosen a child LI. For example: Job Aides > Contacts > Approved Brokers ... and what I mean by that is that the parent LI's (Job Aides and Contacts)do not remain in their hover state when the child LI is being moused over (Approved Brokers).

What I would like for the script to do is to keep the parent LI's in their hover state as a child LI is selected. Looking something like this:

enter image description here

Any ideas on what I can tweak in the function which I have pasted above? Thank you so much in advance!

UPDATE

Below is a copy of my CSS (and I hope that I haven't made a mess):

/* 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;
}

Thanks,

Berklie

You may also need to show the relevant CSS - I assume that's where you're applying your `:hover` ? — Basic, Aug 20 '12 at 16:49
Looks like you are using a:hover, which will not work when you are over the child. Try using li:hover to create the hoverstate. This should allow you to carry down into the sub lists. — Kaizen Programmer, Aug 20 '12 at 17:29
Also see..http://stackoverflow.com/questions/7270193/how-to-make-a-parent-object-in-css-menu-stay-in-hover-state-when-children-are-ho — Kaizen Programmer, Aug 20 '12 at 17:31
Looking at the Stack Overflow answer to which you point helps to an extent, because it helps me set the top tab (Job Aides) and the second selection (Contacts)... but I can't see how it would help me with the next set of options (Approved Brokers, etc.) since the above example only went one level deep (as opposed to two). I've updated the CSS... but I cannot tweak that third level to not show the preceding styles. It's tripping me up not able to overwrite (with "!important") the styles set in the parent LI's. Thanks — Berklie, Aug 20 '12 at 22:01
If you solved your problem you should either answer your question and accept it, or delete the question. — j08691, Aug 20 '12 at 23:55
Will do. (Though I don't know why deleting it would be a good option.) — Berklie, Aug 21 '12 at 15:15

score 0 · Accepted Answer · answered Aug 21 '12 at 15:17

I finally got things how I wanted to work... based on the fact that Stack Overflow folks helped to point me in the correct direction: it was the CSS that needed tweaking, not the jQuery function. I ended up re-learning about CSS Selectors and how the use of the "greater than" sign ( ">" ) will allow the CSS to only directly affect a direct child LI of the parent UL... and not cascade down to every other child LI and UL (which was the problem that I was having when I styled the top-most UL and LI). So, these statements were edited to make it work:

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

Was edited to:

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

And this:

#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;
}

Was edited to:

#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;
}

Thanks again for leading me on a path to learn about CSS Selectors,

Berklie

Re-code fly-out menu function to make parent LI's "sticky"

1 Answers1