Question

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

Answer 1

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

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