Add submenu to mouseover effect

[skien]

I'm hoping someone can help me! I'm working on a site and trying to add a submenu as a mouseover effect, to an already existing mouseover effect. Basically I have 3 tabs in my main menu, which have a mouseover effect. This part I have setup, but I would like to add a submenu to each tab that appears only upon rollover of that tab. Here's my current code just for the one of the tabs:

<a href="url"
onmouseover="document.services.src='tab3_over.gif'"
onmouseout="document.services.src='tab3_off.gif'">
<img src="tab1_off.gif" width="118" height="42" border="0"
alt="Services" name="services"/></a>

So now I just need to add the submenu, which I would like displayed horizontally below the main menu. Any suggetions?

Thanks!

 

[PixelPusher]

Use CSS.
There is absolutely no need for js in a simple rollover like this. Plus markup for that menu has no anchor text, just images. Bad idea. Spiders will not see the anchor text for you links, nor will screen readers. Plus it will kill your seo.

Suggestion:

Beginner Level
Image Background (text over image)

<a href="" class="myLink">Anchor Text</a>

a.myLink {
   background:transparent url(images/yourImage.png) left top no-repeat;
   display:inline-block;
   width:*px   // define a width in pixels
   line-height:*px   // define the line height, will also act as height
   font:bold 10pt Arial;
   color:#fff;
   text-decoration:none;
}
a.myLink:hover {
   background:transparent url(images/yourHoverImage.png) left top no-repeat;
   text-decoration:underline;
}

Intermediate Level
Image Infont of Text- Gilder/Levin Method (seo friendly)

<a href="" class="myLink"><span></span>Anchor Text</a>

a.myLink {
   position:relative;
   display:inline-block;
   width:*px   // define a width in pixels
   line-height:*px   // define the line height, will also act as height
   font:bold 10pt Arial;
   color:#fff;
   text-decoration:none;
}
a.myLink span {
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
   background:transparent url(images/yourImage.png) left top no-repeat;
}
a.myLink:hover span {
   background:transparent url(images/yourHoverImage.png) left top no-repeat;
}