AnyLink JS Drop Down Menu v2.2 problem in Chrome & Safari

[epytome]

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

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

3) Describe problem:
I am building a site using the drop down menu from DD. Links are fine, however the appearance isn't quite right on Google Chrome and Safari. The drop down menus are linked to rectangular buttons and should appear directly beneath them, however on Google Chrome the drop down menu appears a third of the way down the button instead of beneath it, and in Safari it appears around 3 pixels lower than it should. The site can be seen at: http://ultimauk.com/new

I have taken screenshots of Chrome and Safari, and they can been seen here: http://ultimauk.com/new/images/scree...and_safari.jpg

Any help would be greatly appreciated as I have been tearing my hair out trying to solve this. I need the drop downs to line up exactly underneath each button, so when the cursor is selecting a menu item the black to colour fade continues seamlessly down the menu bar. The css has all been integrated into http://ultimauk.com/new/css/normal.css to prevent referencing multiple files, and the original javascript is in /js.

[jscheuer1]

Since your links have the menuanchorclass class, add this to your stylesheet:

.menuanchorclass {
	display: block;
}

Or:

.menuanchorclass {
	display: inline-block;
}

Depending upon the layout, the first may cause layout issues in any browser (adds a line break after the image/link combo), but there are workarounds for that. The second may be problematic in some browsers, but probably not. If it is, there are workarounds.

Looking at the page more, since each menuanchorclass link is in an absolutely positioned container of fixed dimensions, the first option (display: block;) should be just fine.

[epytome]

Sorted. See, now I look like a right idiot. Thanks, that's completely fixed it! (1st option, if you were wondering)

[kpjordan]

Hi John,

I've used both options (currently using display: block) and it fixed the problem described herein, but created another one. On the page load, including the class="menuanchorclass" in the <anchor> tag is causing the page to extend beyond the bottom footer div. I'm not exactly sure, but it seems to correct itself after the menu has been engaged a few times. But if you refresh, again the page will be extended so that the footer is no longer aligned on the bottom of the page.

Here's a link to a work-in-progress page :: http://www.sensiastudio.com/redesign/oops.asp

I appreciate anything you might know that can help.

__________
Keith
__________

[jscheuer1]

Add top: 0; left: 0; two places (as Highlighted below for .anylinkmenu and .anylinkshadow):

.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: transparent; /*set to nav button color*/
}
/** next line fixes overlay problem in Chrome and Safari **/
.menuanchorclass {
	display: block;
}
/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
top: 0;
left: 0;
margin-left: 10px;
margin-top: -12px;
visibility: hidden;
border: 1px solid #4d4429;
border-bottom-width: 1;
font: normal 12px verdana,helvetica,arial,sans-serif;
line-height: 12px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #bac97b;
width: 170px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 0px solid #4d4429;
padding: 2px 2px;
background: #bac97b;
text-decoration: none;
font-weight: normal;
text-indent: 5px;
color: black; /*set the a.link color*/
}

.anylinkmenu a:hover{ /*hover background color*/
background: transparent;
color: white;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 350px;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 10px;
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #E9E9E9;
}

.anylinkmenucols li{
padding-bottom: 3px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #E0E0E0;
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}



/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
top: 0;
left: 0;
pargin-left: 10px;
margin-top: -12px;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

[kpjordan]

That fixed it! You've been such a help...thank you soooo much!

Keith