Chrome Drop Down Menu

[ericca]

1) Script Title: Crhome Drop Down Menu

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

3) Describe problem: when you scroll on a page the drop down menus open where ever the scroll bar stops which could be half-way down page.

navigation { border-bottom: 10px;}
.chromestyle{ width:988px; font-weight: bold; font:11px Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; margin:0px auto 0px auto; font-stretch:wider;}
.chromestyle ul{ background-color:#faa5d5; padding: 10px 0px 5px 25px; margin: 0px 0px 0px 0px; text-align: left; /*set value to "left", "center", or "right"*/ white-space:nowrap; height:15px; }
.chromestyle ul li{ display: inline; }
.chromestyle ul li a {display:inline-block; color: #fff; padding: 0px 30px 0px 0px; margin: 0; text-decoration: none; font-weight:bold; letter-spacing:1px; white-space:nowrap; }
.chromestyle ul li a:hover{ /*background-color:#003399;*/
/*THEME CHANGE HERE*/ }
/* ######### Style for Drop Down Menu ######### */

.dropmenudiv {border: 0px solid #faa5d5; /*THEME CHANGE HERE*/ border-top-width:0px; border-bottom-width: 0px; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:15px; z-index:100; background-color: #fae2ed; width: 116px; } /* text-transform:capitalize; */

* html .dropmenudiv a{ /*IE only hack*/ width: 100%; }

.dropmenudiv a { font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; width: auto; display: block; text-indent: 3px; text-align: left; border-bottom: 1px solid #fae2ed;
/*THEME CHANGE HERE*/ padding: 2px 2px; text-decoration: none; font-weight: normal; color:#000000; }
.dropmenudiv a:active { font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; width: auto; display: block; text-indent: 3px; text-align: left; border-bottom: 1px solid #fae2ed;
/*THEME CHANGE HERE*/ padding:2px 2px; text-decoration: none; font-weight: normal; color:#000000; }
.dropmenudiv a:visited { font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; width:auto; display:block; text-indent: 3px; text-align:left; border-bottom: 1px solid #fae2ed;
/*THEME CHANGE HERE*/ padding:2px 2px; text-decoration:none; font-weight:normal; color:#000000; }
.dropmenudiv a:hover { font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; width:auto; display:block; text-indent: 3px; text-align:left; border-bottom: 1px solid #cccccc;
/*THEME CHANGE HERE*/ padding:2px 2px; text-decoration:none; font-weight:normal; color:#c60070; background-color:#f4bbd6; }

.shadowbox {position: fixed; background-image:url(/images/shadow.png); padding-right: 4px; padding-bottom: 5px; width:auto; height: auto; visibility: hidden; z-index:99; margin-top:6px;border-top:solid 3px #faa5d5;}

[jscheuer1]

It's important to follow the installation instructions carefully. And you cannot have this part (any and all class="dropmenudiv" divisions and the small script(s) which follows them):

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

inside a positioned element.

To be on the safe side, or when in doubt, place them just before the closing </body> tag. Make sure you have no open tags above that.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[ericca]

http://www.3daygear.com

[ericca]

click on a menu - let the page load and then scroll down and the drop down menus follow the scroll bar.

[jscheuer1]

You are using an outdated version of this script. Upgrade to the current version. Make sure to follow the installation instructions.

[ericca]

I have been trying to ascertain if it is a css issue or a script issue.
Appreciate your help.

Thanks
Ericca

[jscheuer1]

Well, yes - I understand. But what you have looks like a mishmash of at least two Dynamic Drive menu scripts, but may just be the older version of Chrome. The newer version doesn't have that shadow stuff, at least not the way you are doing it, that looks like it comes from Anylink CSS Menu, but as I say may have been a part of the old Chrome version.. That could be complicating matters. Best to remove the whole thing and start fresh with the current version.

Or try Anylink CSS Menu instead:

http://www.dynamicdrive.com/dynamici...anylinkcss.htm