The Anchor link in this case is "Anchor Link, and the drop down menu, the entire DIV that follows it. You can place the DIV anywhere on your page you see fit, and not necessarily directly below the anchor link.
Pay attention to the code in red [class="anchorclass" rel="submenu1"] {<div id="submenu1" class="anylinkcss">], as they are mandatory for each anchor link plus drop down menu you're setting up. The required steps are:
1. Identify each anchor link on the page by giving them an arbitrary but common CSS class name (ie: "anchorclass"). This tells the script that these links carry a drop down menu. Assuming for example there are 3 links on your page with a drop down menu- add the same CSS class name inside all 3 links.
2. Next, insert a "rel" attribute inside the anchor link that points to the ID attribute of the drop down menu it should be associated with. In the above example, that would be rel="submenu1".
With all of your anchor links and drop down menus defined using the above procedure, inside the HEAD section of your page, initialize the script by calling:

<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
Where the code in red ["anchorclass"] should be the name of the shared CSS class name that identifies the anchor links on the page.

Anchor Link specific customizations When setting up each anchor link, you can modify the behaviour of its drop down menu so it's shown when "onclick" instead of "onmouseover". To do so, add a "[click]" suffix to the original "rel" attribute definition. For example:

Anchor Link

Valid values for the "rel" attribute: rel="dropmenuid", rel="dropmenuid[mouseover"], or rel="dropmenuid[click]".
To get the menu to drop down to the right of the anchor link instead of the default below it, add an extra "rev" attribute inside the anchor with a value of "lr':

Anchor Link

Valid values for the "rev" attribute: undefined, rev="up", or rel="lr".
You can define both of the above at the same time obviously. Styling the currently selected anchor link
To help users identify the anchor the mouse is currently over, you can style it so it appears distinct. The script dynamically adds a CSS class of "selectedanchor" to the currently selected anchor link (assuming its a text link), and removes the class when it's no longer active. Simply customize this class inside "anylinkcssmenu.css" as desired:

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link
(assuming it's a text link)
background: yellow;
}

You can refine the above so different groups of anchor links get a different selected style. The key is just to harness CSS's ability to limit the element(s) a CSS class gets applied to, by requiring that multiple CSS classes be present. For example, the following CSS applies two different backgrounds to the selected anchor link, depending on whether the anchor also contains another CSS class:

.group1.selectedanchor{
/*CSS class that gets added to the currently selected anchor link that carries the "group1" CSS class*/
background: yellow;
}

.group2.selectedanchor{
/*CSS class that gets added to the currently selected anchor link that carries the "group2" CSS class*/
background: lightblue;
}

If your anchor is an image link, you can insert two custom HTML attributes, "data-image" and "data-overimage", to specify the image that gets shown during the default and selected states. Simply specify the full paths to the two images, for example:

Global menu settings
Inside anylinkcssmenu.js, there are a few effects related settings at the top that affect the drop down menus in general. They are:
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
200 and 500 are in units of milliseconds (ie: 1000=1 second). 0.3 should be a decimal between 0-1. Finally, [5, 5] should be two integers that determine the length of the shadow in x and y directions, in pixels.