AnyLink Drop Down Menu - border appears on menu AND entire div, alignment wrong in FF

[trjonas]

1) Script Title: AnyLink Drop Down Menu

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

3) Describe problem:

I love this script, but am having two problems with it that I have not been able to resolve for some days.

First, I don't want the individual links to have borders around them; I just want the entire dropdown menu to have a border around it. I have accomplished this, but in *either* case, not only do the borders appear on the dropdown menu (as desired), the borders appear around the .div itself, which really messes up the page design. None of the other divs have borders around them, which is how it should be.

Second, the dropdown menu's alignment is correct when viewed in IE7, but in Firefox, it's way off to the left.

Neither of these issues appear on the script's demo page.

Here's the page I'm working on: http://www.aiodesign.us/index-javatest.html

Here's my CSS text (the menu div information is in my separate CSS file for this page):

/* dropdown menu */
#dropmenudiv {
position:absolute;
border:1px solid black;
padding:0;
font-size:82%;
line-height:1.5em;
z-index:100;
}
#dropmenudiv a {
display:block;
text-indent:8px;
border: 0px solid black;
padding:3px;
color:#85A03C;
text-decoration:none;
}
#dropmenudiv a:hover {
color:#A38C5B;
text-decoration:none;
}

I realize that the 100% width code is missing in the CSS code above. I removed it because if I didn't, at first the mouseover blocked out the existing webpage at the height of the menu for the entire width of the screen. Later when I had resolved that issue and tried to put it back in, it moved the menu gif file and menu itself as far left as possible. I want the menu gif file to reside where it is now. If I tell the div to float right, though, the entire page is shoved to the left in IE7 (no longer centered) and the menu appears to the right of everything else rather than appearing beneath the menu gif file as it should.

Thank you so much for anyone who can help!

[ddadmin]

One thing I see implemented incorrectly is the image that activates the drop down menu:

<div id="dropmenudiv"><a href="http://www.aiodesign.us/site/map.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu, '150px')" onMouseout="delayhidemenu()"><img src="images/menu.gif" alt="menu" width="60" height="46" hspace="46" vspace="4" border="0" align="right" /></a></div>

The id "dropdowndiv" is reserved for the drop down menu DIV, so you should at least change the above to something else. Regarding the CSS, does restoring the script to use the default CSS for the menu solve the problem?

[trjonas]

DDAdmin, thank you so much for your response! I posted this question a week ago without receiving an answer and tried posting it again today, but after no answers again for several hours, ended up going with another script. It was just easier than pounding my head against the keyboard, and I figured I had received no responses because no one knew the answer to my quandary. So, I'm set now but thank you again for your response! It is very thoughtful of you.