Anylink Drop Down Menu position problem. Menu drops from middle of image instead of b

[pddishman]

1) Script Title:
AnyLink JS Drop Down Menu v2.3

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:
So far this script seems to work perfectly. One small problem however, I am using the image drop down option and the menu drops from the middle of the image instead of directly below it. How can i change it so that it drops from directly below the image instead of from the center of the image?

Thank you for your help

[jscheuer1]

I think there're a couple of options here. Try setting the css display property of the image to inline-block. Or it's vertical-align css property to top.

If neither of those works for you and you want more help. please provide a link to the page on your site that contains the problematic code so we can check it out.

[pddishman]

I had tried the inline-block and the vertical-align suggestion doesn't work either. My site is not live yet, still working on it, however, if you look at the above script link, you will see that the image drop down menu example also drops from the middle of the image. Any other suggestions would be much appreciate
If needed I can upload everything to one of my sites, however the code differs little except for some font and color and width changes
Thank you for your help.

[jscheuer1]

Oopsies! I knew this had happened before. And it's only in some browsers, I think the web-kit/chrome style ones like Chrome, Opera, Safari. And I was right, but I had the wrong element, or it depends. If you're using the construction like on the demo page, it's the parent a element, like:

<a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4" data-image="http://i52.tinypic.com/24g7uc7.giff" data-overimage="http://i55.tinypic.com/2z5lzlu.gif">
<img src="http://i52.tinypic.com/24g7uc7.gif" style="border-width:0" /></a>

And there have been various versions, I'm not sure if you can with this version make the menu drop (programatically) from the image itself. If so, then it's the image. But, as I say, using this type markup, it's the parent. This worked here:

<a href="http://www.dynamicdrive.com" style="display: inline-block;" class="menuanchorclass" rel="anylinkmenu4" data-image="http://i52.tinypic.com/24g7uc7.giff" data-overimage="http://i55.tinypic.com/2z5lzlu.gif">
<img src="http://i52.tinypic.com/24g7uc7.gif" style="border-width:0" /></a>

You of course may need to refresh and/or clear the cache to see changes. Also, if you prefer this could be added to the stylesheet as:

.menuanchorclass {display: inline-block;}

instead.

Using vertical-align: bottom; or middle also seems to work.

[pddishman]

style="display: inline-block;"

This code did the trick,
Thank you very much for your help