Menu to drop down only on arrow?

[Marindi]

I have a dropdown menu that drops when you hover on the first/main title. I
want to change it so it only drops when you hover on the arrow next to the
title, not on the whole <td>. What do I need to change?

Here is a bit of the code: (currently it drops when you hover on CardBizZone
and â–¼ - I want it to only drop on the "â–¼" /arrow bit)

<tr>
<td class="menuBlur" onmouseover="openlist(this);"
onmouseout="closelist(this);" style="border: 0px; padding-left: 4px;
padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
<p class="MainMenulink"><font color="#FFFFFF">
<a class="MainMenulink" target="_top"
href="../CardBizZone/CardBizZoneIndex.htm">CardBizZone<font face="Arial">
â–¼</font>
</a></font>
</p>
<div class="menuBlurMain" width="100%" style="float: center">
<table class="itemtable" width="100%" style="border-collapse: collapse;
border: 1px solid #29634B; padding-left: 4px; padding-right: 4px;
padding-top: 1px; padding-bottom: 1px" border="0" bordercolor="#000000"
cellspacing="3">
<tr>.... and so the table continues...

 

[Ronx]

Here is something to try:

Change this:
<td class="menuBlur" onmouseover="openlist(this);"
onmouseout="closelist(this);" style="border: 0px; padding-left: 4px;
padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
<p class="MainMenulink"><font color="#FFFFFF">
<a class="MainMenulink" target="_top"
href="../CardBizZone/CardBizZoneIndex.htm">CardBizZone<font face="Arial">
?</font>
</a></font>
</p>

to this:

<td class="menuBlur" style="border: 0px; padding-left: 4px;
padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
<p class="MainMenulink"><font color="#FFFFFF">
<a class="MainMenulink" target="_top" onmouseover="openlist(this);"
onmouseout="closelist(this);"
href="../CardBizZone/CardBizZoneIndex.htm">CardBizZone<font face="Arial">
?</font></a></font>
</p>

2) Or to this:

<td class="menuBlur" style="border: 0px; padding-left: 4px;
padding-right: 4px; padding-top: 1px; padding-bottom: 1px">
<p class="MainMenulink"><font color="#FFFFFF">
<a class="MainMenulink" target="_top" onmouseover="openlist(this);"
onmouseout="closelist(this);"
href="../CardBizZone/CardBizZoneIndex.htm">CardBizZone</a>
<a href="javascript:;" onmouseover="openlist(this);"
onmouseout="closelist(this);"><font face="Arial">?</font></a> </font>
</p>

The above will open the dropdown when you hover on the link 1) or the
arrow 2) (which is what you asked for)
However, the dropdown will close as soon as the mouse moves away from the
link or arrow, which is probably not what you want - that will take a lot
more effort.

 

[Marindi]

Thx Ron - I've tried both options and they do not work... Basically nothing
happens when you hover on the name or the arrow - it gives you the little
clickable hand, but the menu doesn't drop down.

I've also tried changing the code to this so the function is only on the
arrow, but get the same error:
<td class="menuBlur" style="border: 0px; padding-left: 4px; padding-right:
4px; padding-top: 1px; padding-bottom: 1px">
<p class="MainMenulink"><font color="#FFFFFF">
<a class="MainMenulink" target="_top"
href="../CardBizZone/CardBizZoneIndex.htm">CardBizZone</a><a
href="javascript:;" onmouseover="openlist(this);"
onmouseout="closelist(this);"><font face="Arial"> â–¼</font></a></font></p>

 

[Marindi]

Ron, I've put the arrow in a seperate line below the CardBizZone heading,
therefor created a seperate <tr> and <td> for the arrow, and put the
open/coselist functions in the arrow's <td> class (as per my original) and
it's working. It's not excatly looking the way I want (with the arrow below
the word) but I think I can get away with it like that seeing as it is doing
what I want to.
Thx for your help again