Chrome Drop Down Menu DropDown Alignment

[nothere]

1) Script Title: Chrome Drop Down Menu

2) DD Url: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

Below is the css file being used. No changes were made to the.js file. Unlike the demo pages on the DD site, in both MSIE and FF the drop down happens more than 10px's below the nav link and to the same to the right. It needs to hug the bottom of the nav link line, like the demo does.

In FF the drop down links are active and available, but in MSIE they are not. Mouseovers drop down the menu list, but moving the mouse to acquire the list in MSIE eliminates them.

Any help would be mucho greatly and a whole lot appreciated. Thank You



.chromestyle{
position:absolute;
top:137px;
left:0px;
width: 974px;
z-index:11;
font:bold 11px Verdana;
height:21px;
overflow:hidden;
color:#444444;
background: url(chromebg.gif) center top repeat-x;
}
.chromeleft {
position:absolute;
top:0px;
left:0px;
height:21px;
width:12px;
z-index:100;
background: url(chromeleft.gif) left top no-repeat;
}
.chromeright {
position:absolute;
top:0px;
right:0px;
height:21px;
z-index:100;
width:12px;
background: url(chromeright.gif) right top no-repeat;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
z-index:110;
width: 975px;
background: url(chromebg.gif) center top repeat-x;
padding: 3px 3px;
margin-top: 0px;
height:19px;
z-index:-1;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #444444;
padding: 5px 5px;
margin: 0;
z-index:1100;
text-decoration: none;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(chromebg-over.gif) center bottom repeat-x;
z-index:1100;
margin-top: 1px;
}

/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top:10px;
left:10px;
z-index:1000;
border: 1px solid #F3A84B;
border-bottom-width: 0;
font:normal 11px Verdana;
line-height:15px;
z-index:100;
background-color: #FDF7EE;
width: 150px;
text-align:left;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
}
.dropmenudiv a{
width: auto;
display: block;
text-align:left;
text-indent: 3px;
z-index:10000;
border-bottom: 1px solid #F3A84B;
padding: 2px 0;
text-decoration: none;
font-weight: 100;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 275px;
position:relative;
top:0px;
left:0px;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FBE3BD
}

[ddadmin]

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

[nothere]

I guess I have to pass on the help then. The build is protected and I cannot place the url in a publicly accessible location. Thank you anyway.

[ddadmin]

Well, in general, most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<!--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>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</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>

<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>