AnyLink Drop Down Menu - border issue *and* FF alignment issue
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 hours.
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.
I'm sure that this will turn out to be an ID10T error (too much staring at code for too long?), but am risking possible humiliation, as I would love the menu to work properly!
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;
}
Or if needed, the entire CSS file can be viewed here: http://www.aiodesign.us/css/LS.css
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!
P.S. In case a viewer of this post is wondering... I haven't yet posted the default page for non-Java-enabled browsers.