SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,644
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    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.../
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <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.

    Code:
    * 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •