All Levels Navigational Menu (v3.02) - Maintain top level link background image

[fileslasher]

1) Script Title: All Levels Navigational Menu (v3.02)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

3) Describe problem: First off, let me say that this site is awesome! Love it.
Ok, now that I got that out of my system lets move on. I'm having what seems to be a simple problem with my top level link that contains my sub menu. I'm only using one sub menu in my nav and I'm styling each link in the top menu separately with css. Here's my nav (Horizontal btw) with my #services-link css as an example:



#services-link a {
height:0;
width:99px;
overflow:hidden;
padding:34px 0 0 0;
background:url(style-imgs/services.png);
}

#services-link a:hover, a:active {
background: url(style-imgs/services-sel.png);
}

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li id="home-link"><a href="../">Home</a></li>
<li id="about-link"><a href="about/">About</a></li>
<li id="services-link"><a href="services/" rel="ddsubmenu1">Services</a></li>
<li id="schedule-link"><a href="schedule/">Schedule</a></li>
<li id="photos-link"><a href="photos/">Photos</a></li>
<li id="comments-link"><a href="comments/">Comments</a></li>
<li id="contact-link"><a href="contact/">Contact</a></li>
</ul>
</div>

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Grooming and Training</a></li>
<li><a href="#">Dog Safety</a></li>
</ul>


So, each top menu link has its own bg image and hover bg image. When I hover in the sub menu for Services, that top level Services bg image reverts back. Of course I would like the hover bg image to remain while I'm in the sub menu. Anyone have any idea how I can fix this?
*NOTE EDIT*
I should say that I only removed the basic default styling properties in the css for top the level such as colors, text-size etc.

In the vertical side bar demo (demo2.htm). The top level background color remains when hovering in the submenus.

Any help would be greatly appreciated.

[fileslasher]

Well, I found a temp solution using simple javascript onmouseover and onmouseout events but it's not perfect. It's a bit jittery when the image reloads in IE and Chrome. If anyone knows a better solution I'd appreciate any help.

Here's the code if any wants to use it.


<script type="text/javascript">
function test() {
document.getElementById("test").style.backgroundImage="url(style-imgs/services-sel.png)";
}
function test2() {
document.getElementById("test").style.backgroundImage="url(style-imgs/services.png)";
}
</script>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li id="home-link"><a href="../">Home</a></li>
<li id="about-link"><a href="about/">About</a></li>
<li id="services-link"><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1" id="test" onmouseover="test();" onmouseout="test2();">Services</a></li>
<li id="schedule-link"><a href="schedule/">Schedule</a></li>
<li id="photos-link"><a href="photos/">Photos</a></li>
<li id="comments-link"><a href="comments/">Comments</a></li>
<li id="contact-link"><a href="contact/">Contact</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul id="ddsubmenu1" class="ddsubmenustyle" onmouseover="test();" onmouseout="test2();">
<li><a href="#">Grooming and Training</a></li>
<li><a href="#">Dog Safety</a></li>
</ul>

[fileslasher]

*Edit* Nevermind, I had my html within an element where I just had to change the z-index of #ddtopmenubar.

Uhg......

I just realized something that has nothing to do with my previous problems. So why does the html for the dropdown menu need to be placed right above the </body> tag and why if I put it within another element is it invisible??????????!!!!!!!!!!!!!!!