do "something" when hovering over a LI, but not when over containing LI's

how would i got about doing "something" when hovering over a list item, but not to containing list items.

example:

$('#mainnav li').hover( function () {
    $(this).find('ul').stop(true,true).slideDown(100);
    $(this).find('a:first').css({
        "background-image": 'url(/assets/images/nav_bg2.png)',
        "color": '#fff',
        "text-shadow" : '1px 1px 1px #000'
    });

}, function () {
    $(this).find('ul').stop(true,true).slideUp(100);
    $(this).find('a:first').css({
        "background-image": 'none',
        "color": '#630872',
        "text-shadow" : '1px 1px 1px #fff'
    });
});

sample html

<div id="mainnav">
<ul>
    <li  class="active nav-home">

        <a href="/">Home</a>
        <ul>
            <li><a href="/home/welcome">Welcome</a></li>
            <li><a href="/home/latest-conveyance">Latest Conveyance</a></li>
        </ul>
    </li>

    <li  class="nav-who-we-are">

        <a href="/who-we-are">Who We Are</a>
        <ul>
            <li><a href="/who-we-are/history">History</a></li>
            <li><a href="/who-we-are/culture">Culture</a></li>
            <li><a href="who-we-are/people">People</a></li>
            <li><a href="who-we-are/vision">Vision</a></li>

        </ul>
    </li>


    <li  class="nav-what-we-do">
        <a href="/what-we-do">What We Do</a>
        <ul>
            <li><a href="/what-we-do/services">Services</a></li>
            <li><a href="/what-we-do/projects">Projects</a></li>

            <li><a href="/what-we-do/portfolio">Portfolio</a></li>
            <li><a href="/what-we-do/philanthropy">Philanthropy</a></li>
        </ul>

    </li>

</ul>
</div>

the problem here is that i want to apply some css to top level list items, but not to ones nested beneath. the code currently applies the css whenever i hover over a list item inside the top level list items. does this make sense?

btw, this is for a menu, i want the top to tabs to stay lighted up while i 开发者_运维知识库scroll through dropdown

If I understand the question correctly then look at using a child selector

$('#mainnav>ul>li').hover( function () {

Be more specific in your selector. Try changing '#mainnav li' to '#mainnav>ul>li' or '#mainnav>ul>li>a'.

The easiest thing would be to make sure the CSS specifically selects those li's which you do want to highlight:

#mainnav > ul > li.classname {
   /* css code here */
}

So the combination of JQuery to set the classname, and the CSS selector to only select those li elements that match with the top level ones once classnames have been set should do the trick.