Chrome Drop Down lists not aligned properly

[Synthia]

1) Script Title: Chrome CSS Drop Down Menu v2.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/chrome/

3) Describe problem:

I was able to test the functionality of this script and all looked good on my local drive.

But when I insert the code into my page's header (using a Wordpress theme), everything looks good until you scroll over the drop down links ("services" and "portfolio"). See in the attached screenshot that the submenu appears too far to the right.

The site's url is http://www.nectardesign.com.

I have modified the CSS to fit my theme. Here it is below:


.chromestyle{
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
width: 490px;
}

.chromestyle ul{
font-size:12px;
margin:0;
padding:0;
float: right;
}

.chromestyle ul li{
/* display: inline; */
}

.chromestyle ul li.page_item {
float:left;
list-style:none;
margin:0;
padding:0;
}

.chromestyle ul li a{
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
float: left;
}

.chromestyle ul li.no_bar a{
border: none;
}

.chromestyle ul li a:hover {
color:#FE6E19;
text-decoration:none;
}

.chromestyle ul li.current_page_item, .chromestyle ul li.current_page_item a {
color: #FE6E18; /* orange */
text-decoration:none;
}




/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #b0b0b0; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
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-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
text-align: left;
color:#808080;;
}

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

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}

Any help to get my submenus lined up correctly would be greatly appreciated! I like this script very much.

[ddadmin]

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.nectardesign.com/services/3d-visualization-presentation-services/">3D Visualization</a>
<a href="http://www.nectardesign.com/services/branding-services/">Branding</a>
<a href="http://www.nectardesign.com/services/industrial-design-services/">Industrial Design</a>
<a href="http://www.nectardesign.com/services/engineering-services/">Mechanical Engineering</a>
<a href="http://www.nectardesign.com/services/project-production-management-services/">Production Management</a>

<a href="http://www.nectardesign.com/services/project-management-services/">Project Management</a>
<a href="http://www.nectardesign.com/services/prototype-service/">Prototype Design</a>
<a href="http://www.nectardesign.com/services/user-interface-services/">User Interface</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.nectardesign.com/category/all-products/">All Products</a>

<a href="http://www.nectardesign.com/category/consumer-products/">Consumer Products</a>
<a href="http://www.nectardesign.com/category/industrial-products/">Industrial Products</a>
<a href="http://www.nectardesign.com/category/medical-products/">Medical Products</a>
</div>


<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</body>

[student101]

Very helpful,
Thanks.