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

Hi all, 

I haven't received a response, so I've put up a test page to make it a bit more clear. 

http://paulcollinslondon.com/test/test.html

Basically, the second level navigation is showing when the page loads, because the parent list item for "ABOUT US" has a class of "selected". When you mouseover the second level nav though, it disappears and I'm not sure why.

If it has a class of selected, I only want it to disappear when you roll over another top level link. Can anyone let me know what I'm doing wrong here?

Thanks for any help

Paul

2009/7/27 Paul Collins <pauldcollins@gmail.com>

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