Question

I have a menu with sub-menu child navigation as well, and I’m trying to append a class to the parent of the children based on the hovering of the children’s <ul> container.

This is what I have so far: http://jsfiddle.net/2KhnX/15/

but as you can see, the class never gets appended. If I strip most of the CSS from the HTML, but leave the class I’d like appended, it works fine – http://jsfiddle.net/2KhnX/21/

Which leaves me to believe that the CSS is conflicting or ruining the event that the JQuery is attempting to carry out. My guess would be because I’m using the parent > child rules of CSS, or perhaps because .sub-menu has an initial property of display:none. I’m not sure, I just know that the CSS is messing this up, or that I’m not using the appropriate selector because of the CSS.

Any insight would be greatly appreciated, for I am lost.

Answer 1

This is the offending css:

ul.menu li a:link, ul.menu li a:visited {
        background: url('images/alink.jpg') top center repeat-x;
}
.parenthovered {
    /* stuff */
}

Those first selectors have a higher specificity than the .parenthovered selector, and thus are taking precedence. You can address this in a few ways; one way is to be less specific on the first set of selectors, and more specific on the second selector:

a:link, a:visited {
        background: url('images/alink.jpg') top center repeat-x;
}

.menu a.parenthovered {
    /* stuff */
}

Of course, you’ll have to choose selectors that make sense for the rest of your page…

working fiddle: http://jsfiddle.net/pabo/NR4yB/1/

Also, removing this line works too:

background: url('images/alink.jpg') top center repeat-x;