First let me state that I'm a jquery noob, so this may not make a lot of sense.

So I have a series of list items that expand to show a hidden div inside if the user mouses over a link inside the item (not the whole list item itself)

The problem is that if the users mouse leaves the link the li closes up again.

I need this to work in a way so that the li only closes if you mouse over a link in another li. (sorry this is kind of hard to put into words)

Heres my code.

$(document).ready(function(){
                $(".home_upcoming_title").hoverIntent({
                over: makeTall, 
                timeout: 500, 
                out: makeShort

        });
    }); // close document.ready

    function makeTall(){$(this).parents("li").animate({"height":200},200);}
    function makeShort(){$(this).parents("li").animate({"height":32},200);}

and the HTML

    <li class="p1">

            <ul class="home_upcoming_list2" id="fade">
            <li class="home_upcoming_date">Sat.Sept.23rd.2010</li>
            <li><a href="./." class="home_upcoming_title" >Event Title</a></li>
            <li class="home_upcoming_city">Los Angeles</li>
            <li class="home_upcoming_type">Festival</li>
            <li class="home_upcoming_venue">Venue</li>
            <li class="home_upcoming_age">18+</li>
            <li><a href="./." title="Buy Tickets" class="home_upcoming_tix">Buy Tickets</a></li>
            <li><a href="./." class="upcoming_info" title="View Details"></a></li>
            </ul>

        <div style="height:150px; background-color:#FF0000; display:block;" class="sl0w"></div>
        </li>

so the link with the class "home_upcoming_title" expands li to show the div inside but when I mouse over the div itself the list closes. I also need it so only the class "home_upcoming_title" expands the div. but it needs to stay open until you mouse over another link with the same class.

sorry if that doesn't make much sense :)