This dropdown example took only a few minutes to make.

By J.C. White 

Step 1

These three transparent gifs were made in a common image editor then they were each placed on layers of their own.
Hippy PictureDesigner

Step 2

Three more HTML type layers were added to house the links.  Tables were placed on each layer to assure the links get correctly spaced and sized.  To save time, a standard webpage editor was used to generate the html.

For the "hippy days" example the HTML looked like this:

<table cellpadding="0" cellspacing="0" style="width: 65px; height: 200px">
<tr>
<td align=center>links<br><a href="" onclick="return false" >Link one</a><br>
<a href="" onclick="return false" >Link two</a><br>
<a href="" onclick="return false" >Link three</a><br>
<a href="" onclick="return false" >Link four</a><br>
<br><br></td>
</tr>
</table>

 For the "Designer" example the HTML looks like this:

 <table cellpadding="0" cellspacing="0" style="width: 100px; height: 160px">
<tr>
<td class="style1">&nbsp;</td>
<td class="style1"></td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style2"><a href="" onclick="return false" >2</a></td>
<td class="style1">&nbsp;</td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td class="style1"><a href="" onclick="return false" >3</a></td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td class="style1">&nbsp;</td>
<td class="style2"><a href="" onclick="return false" >4</a></td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td class="style1"><a href="" onclick="return false" >5</a></td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style2"><a href="" onclick="return false" >6</a></td>
<td class="style1">&nbsp;</td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td class="style1"><a href="" onclick="return false" >7</a></td>
<td class="style1">&nbsp;</td>
</tr>
<tr>
<td class="style1">&nbsp;</td>
<td class="style1">&nbsp;</td>
<td class="style2"><a href="" onclick="return false" >8</a></td>
</tr>
</table>

The table made looks similar to this. 

  1  
2    
  3  
    4
  5  
6    
  7  
    8

Step 3

The following image was added to another layer.  This layer is the top most layer so that the other layers may emerge from behind it.  It does not move so it essentially only has one point and stays paused at that point the entire time.
three top 

Step 4

Each of the layers that contained the dropdown-menus images were plotted.  The points were then cloned to the corresponding link layers so that they would ride overtop of the images exactly.
Hippy PictureDesigner

Step 5

One last html type layer was added to display the menu titles.  For the onMouseOver event for each of the menu titles the DIVaction function was added to activate the corresponding set of layers.
For the "Hippy days" dropdown the activation call looks like this:

 onmouseover="DIVaction('hippy_menu,hippylinks','a'); DIVaction('Modern_menu,proto_menu,proto_links,menu_links,designe_links','f')"

Notice that the DIVaction function is called twice here. The first, we use an 'a' trigger to activate the two hippy layers.  The second, is to hide all the other drop-down layers if they are not already hidden and this is done by using an 'f' trigger which signifies that we want those layers to finish (travel to the end of its trajectory).

Step 6

 to assure that the menus retract when the user moves off of them a DIVaction funtion call was added to each of their OnMouseOut events.
For "Hippy days" the function call looks like this:

 DIVaction('hippy_menu,hippylinks','f')

That is all there is to it.