[jQuery] Re: Make width of inner div equal outer

[Paul Collins]

Hi all,

I'm completely stuck and been trying to solve this all day! Any help would
be greatly appreciated...

Basically, I have a suckerfish type navigation. It works fine with CSS and
I'm trying to add some JQuery to animate the slide-down effect. I've got
that working, but I need to have the sub-nav showing when I am on the actual
page and keep it there when you hover over it, unless you hover over a
different top level navigation. With CSS, it works fine as I add a class of
"selected" to the top level, but I can't work it out in JQuery. Here is my
code:

function mainmenu(){

    if ($("#header ul#topNavigation li").is(".selected")){
        $(this).find('div:first:visible');
    }else{
        $(this).find('div:first:invisible');
    };

    $("#header ul#topNavigation li").hover(function(){

$(this).find('div:first').css({visibility:"visible",display:"none"}).slideDown(300);
        },function(){
            $(this).find('div:first').css({visibility:"hidden"});
    });
}

// activate function
$(document).ready(function(){
    mainmenu();
});

The HTML

<div id="header">
<ul id="topNavigation">
<li><a href="/">Home</a></li>
 <li class="selected">
<a href="/">About Us</a>
 <div class="secondLevel">
<ul>
<li><a href="/">Overview</a></li>
 </ul>
</div>
 </li>
<li><a href="/">Contact</a></li>
 </ul>
</div>

Currently, the 2nd level appears if I have the class of "selected", but it
dissapears when I mouse over it. I would need it to stay there until I hover
over a different top level nav item.

Would really appreciate any help.
Thanks
Paul