Most of the positioning problems with the drop down DIV 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:
Code:
<DIV id="Affordcontent" style="position:absolute; visibility: hidden; border: 2px solid green; background-color: white; width: 300px; padding: 2px;">
Affordable Self Storage Content goes here.<br /> And more goes here and here and here and here and here.</DIV>
<DIV id="alpinecontent" style="position:absolute; visibility: hidden; border: 2px solid green; background-color: white; width: 300px; padding: 2px;">
Alpine Chamber Content goes here.<br /> And more goes here and here and here and here and here.</DIV>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("Afford", "right-bottom", 10, "mouseover")
dropdowncontent.init("alpine", "right-bottom", 10, "mouseover")
</script>
</body>
Notice how you should also move the initialization code to the bottom, following (not proceeding) the drop down DIVs.
Bookmarks