detect link in 2nd level li and add a span, plus add class to parent li on hover

Question

I'm working on a two level unordered list menu, and so far was able to take some decent newbie steps in figuring out how to show and hide the menu using jQuery, as well as animate it a tad.

I have two issues to resolve:

1. I want to have the parent li remain in hover state when it is hovered while the mouse is hovering over its child ul
2. I'd like to detect if the parent li has a ul, and add a span between the a tags, resulting in: <a href="#">Text <span style="addedStyle">&nbsp;</span></a>

Here's the jQuery I'm using so far. the ".addClass("active")" doesn't seem to be doing much:

$(".leftMenu li:has('ul')").hover(
    function(){
        $(this).addClass("active").children().animate({opacity: 'show'});
    },
    function(){
        $(this).removeClass("active").children().hide();
    }
);
//this line is wrong and non-functional
$(".leftMenu li:has('ul > a')").append('<span class="arrowdiv">&nbsp;</span>');

Looking forward!

Answer 1

Figured it out. Learning something new every day!

I had to find the "a" and append it to that. it simply was appending to the whole li, and I had to focus on the a, which I obviously did as so:

$(".leftMenu li:has('ul') > a").append('<span class="arrowdiv">&nbsp;</span>')
.parent().hover(
function(){
  $(this).addClass("active").children().animate({opacity: 'show'});
},
function(){
 $(this).removeClass("active").children().hide();
}
);