View Full Version : AnyLink Drop Down Menu - Curved!

03-03-2006, 06:13 PM
I am trying to create a drop down menu on a curved nav. I added the "Anylink Drop Down Menu" code to a DIV and set the z-index so that the header image would always stay on top.

I am trying to get the menu to pop down under the curve. I have been successful in that the menu appears cross-browser, but my problem is that IE and FireFox (curse those browser differences!) place the drop down menu in different places vertically.

Here is my development page.
Mouse over "About Us" to see the menu. Currently it looks great in FireFox and is way too low in IE.

If I change the alignment so that IE shows correctly, then FireFox bumps it up too high. I figure perhaps adding some code such as "if FireFox, do ..." ? would fix it.

Any ideas?

Thanks so much in advance,


03-03-2006, 08:18 PM
Well, you have not carried out the menu to its logical conclusion (by adding in the other submenus). If you do, this fix may not work for all drop downs but, I found that using this:

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+(ie4&&!window.opera? 0 : obj.offsetHeight)+"px"

instead of this:

dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

did the trick for that one drop down in both browsers.

Notes: I have reservations about the page in general, it has no DOCTYPE so renders differently in FF and IE to begin with. Using a minimal DOCTYPE like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

will allow you to design a more uniform looking page, once that is done, this problem may no longer exist although, simply adding the DOCTYPE does not fix it, I checked already.

03-03-2006, 08:26 PM

Thank you so much! I also figured out a way to fix it: I moved style="position:relative" into the image tag rather than the div tag. That bumped it up perfectly for both browsers.

Edit: I lost the rollovers in the drop downs with my fix.


03-03-2006, 10:52 PM

There is something wrong with the margin-top attribute in my stylesheet. If I don't give the #dropmenudiv a margin-top, then the entire menu is functional but too low on the page. If I add margin-top: -67px; which puts it in the right place, I lose my drop down link and rollover functionality after the first menu option.

I am pretty frustrated... can anyone help?