Positioning question

On my site
Charlie and Susan - Template
I’m trying to figure out why and how the menu’s dropdown links are screwed up and how to fix it so the dropdown occurs below the link, like in
Dynamic Drive DHTML Scripts- Drop Down Tabs demos

THANKS…/

You have got a bit of a complicated dropdown there. The URL below gives you a simple but effective dropdown menu that you can adapt to your needs, by Sitepoint’s guru Paul O’Brien. His is a handy site to reference.
Good luck.

Horizontal Drop Down Menus

Yes, that’s a bit of a rubbish script. The main problem is that the dropdown menu can’t be inside any elements that have position:relative set or they get offset incorrectly.

This means that the dropdown part of the menus have to be moved outside of the main container completely like this:


<div id="dropmenu1_a" class="dropmenudiv_a"> <a href="/properties/700FrontStreet.php">700 Front Street</a> <a href="/properties/13123rdStreet.php">1312 3rd Street</a> <a href="/prpertries/631Balboa.php">631 Balboa Avenue</a> <a href="/properties/204LasPalmas.php">#204, Las Palmas</a> <a href="/properties/1509ElCamino.php">#1509, El Camino</a> <a href="/prpertries/904ElMirador.php.php">#904, El Mirador</a> </div>
<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;"> <a href="/info/neewsletter.php">Newsletter</a> <a href="/info/news.php">Real Estate News</a> <a href="/info/calc.php">Mortgage Calculator</a> <a href="/info/school.php">School info.</a> <a href="/info/neighborhood.php">Neighborhood info.</a> <a href="/info/test.php">Testimonials</a> </div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 0)
</script>
</body>
</html>


Then you need to add this code to get some consistent styling back.


* html .dropmenudiv_a {
    margin:-20px 0 0 -20px
}
*+html .dropmenudiv_a {
    margin:-20px 0 0 -20px
}
.ddcolortabsline {
    overflow:hidden
}
.ddcolortabs {
    text-align:center;
    clear:both;
}
.ddcolortabs ul {
    display:inline-block;
    clear:both;
}
* html .ddcolortabs ul {
    display:inline
}/* ie6 inline-block fix*/
*+html .ddcolortabs ul {
    display:inline
}/* ie7 inline-block fix*/


Too much effort for my liking and the one Ornette linked to is much simpler and works without javascript in IE6 and above. You can bolt on superfish for special effects if needed.