Help needed with styling Javascript navigation list please - happy to pay!

OK I've posted this in another section on here but still havent been able to resolve the issue so I'm now happy to put my hand in my pocket and get someone who knows what they're doing to fix it. I'm pretty sure its a Javascript issue rather than a CSS issue but if I'm wrong then please correct me

"This is what I put in the other thread which is located here: http://forums.digitalpoint.com/showthread.php?t=1290725

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"

All that I want is for someone to give me the code for me to insert it - but to also include notes within that code so that I know how to edit in the future if need be.

Thanks all

 

Just a couple of images to clarify further what the problem is:

Here 'about' is still hi-lighted while hovering the sub menus:



On my site as soon as I move across to the submenu 'products' is no longer hi-lighted:

 

Hi i'm ready to takeup this task. will PM the details and the solution.

 

Thanks so much to beesystem for a great job! For those interested the problem was a simple CSS problem rather than javascript (but something I certainly wouldnt have picked up on myself!)

replacing "ul li a:hover" with "ul li hover:a" was all it too

Great job beesystem! iTrader coming your way

 

hover:a ?!?!?!
LOL ... There is no such thing in CSS.
I think you changed hover:a to a:hover .

 

You obviously replied without checking the code! This is the new code and it works perfectly (I did add a ":" in my statement earlier so maybe thats where I confused you)

ul li:hover a {
display: block;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
letter-spacing: normal;
padding-left: 20px;
padding-top: 10px;
background-image: url(images/buttons/background/up.gif);
background-repeat: no-repeat;
}

 

Just fair warning, that ul li:hover won't work in IE6 without help.