Need help with javascript fly out menu please

I'm not sure if this is a CSS issue or a Javascript issue so I've posted it in both sections! Hope thats ok

This is probably something very simple but its driving me nuts so I'm hoping someone here can help me out... pretty please!!

I've put together a mock page for my client and at the moment we're just playing about with the navigation. They've given me the style of nav they'd like which I've pretty much been able to replicate, bar one problem!

The style they'd like is at the top of this page, but vertical rather than horizontal:

http://www.iinet.net.au/index.html

This is what I've come up with so far... the problem being that when you scroll the flyout menu, the main menu item no longer shows the background image... how oh how oh how do I fix this??!!

http://fontmedia.com.au/penair/index.html

Please save me from myself!! haha

Thanks in advance

Rahelle

 

it's a js issue. seems like jquery.

  $("#nav li").hover(
    function() { 
      $(this).addClass("over");
      $("ul", this).bgiframe(); 
    }, 
    function() { 
      $(this).removeClass("over"); 
    }
  );

PHP:

i assume this is the problem, you do mouseout of the parent as you enter the child.

not that easy a fix... i dont have time so i pseudo code will basically give you the idea of what you can to do:

on the .hover function, you need to check to see if the parent of the parent of the element is a li. it goes something like:

<li><a href="#">Products</a>
<ul><li><a href="#">Which Unit?</a></li>

PHP:

so the li.hover on 'which unit' here will have a parent <ul> and a parent of that as a <li> - Products. Just create a recursive function like:

var toggleParentOver = function(childTrigger) {
    // get childTrigger's parent(), see if the parent's parent in itself is <li> element, if so:
    //if !hasClass("over") -> addClass("over"); else removeClass("over") as a precaution;
    // toggleParentOver(parent); // recursion down to level 1 where it won't be a <li> parent but div id='nav' 
};

PHP:

and now run toggleParentOver($(this)); within the .hover...
i hope this makes some sense at least

 

Thanks ever so much for this - I'll give it a try.

Very much appreciated