SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Suckerfish dropdown not functioning correctly

    I am having an issue with this Suckerfish dropdown menu. For some reason, the dropdowns are all being replaced by the initial tabs that they are positioned below. I have text that I need in those areas, but can't figure out how to get this fixed. Any help is appreciated.

    Here is the CSS...

    Code:
    * {margin : 0; padding : 0;}
    img {border : 0;}
    .left {float : left;}
    .right {float : right;}
    .clear {clear : both;}
    body, html {background-color : #E936D7; color : #000; text-align : center;}
    h1, h2, h3, h4, h5, h6, h7 {font-family : Arial, Verdana, sans-serif;}
    /* First Layer */
    #wrap {background-color : #FFF; border-left : 1px solid #000; border-right : 1px solid #000; margin : 0 auto; width : 800px;}
    
    
    /* Navigation */
    #navtop, #navtop ul {padding : 0; margin : 0; list-style : none;}
    #navtop a {display : block;}
    #navtop li {float : left; margin : 0 3px 0 0;}
    #navtop li ul {position : absolute; width : 6em; left : -999em;}
    #navtop li:hover ul, #navtop li.sfhover ul {left : auto;}
    #navtop li ul li {background : #530C6D;}
    #navtop li.home a {background : url("../pics/navtop/home.jpg") 0 0; width : 70px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.home a:hover, #navtop li.home a:focus, #navtop li.home a.focus {background : url("../pics/navtop/home.jpg") 0 -50px;}
    #navtop li.yoga a {background : url("../pics/navtop/yoga.jpg") 0 0; width : 64px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.yoga a:hover, #navtop li.yoga a:focus, #navtop li.yoga a.focus {background : url("../pics/navtop/yoga.jpg") 0 -50px;}
    #navtop li.pilates a {background : url("../pics/navtop/pilates.jpg") 0 0; width : 76px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.pilates a:hover, #navtop li.pilates a:focus, #navtop li.pilates a.focus {background : url("../pics/navtop/pilates.jpg") 0 -50px;}
    #navtop li.massage a {background : url("../pics/navtop/massage.jpg") 0 0; width : 90px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.massage a:hover, #navtop li.massage a:focus, #navtop li.massage a.focus {background : url("../pics/navtop/massage.jpg") 0 -50px;}
    #navtop li.acupuncture a {background : url("../pics/navtop/acupuncture.jpg") 0 0; width : 118px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.acupuncture a:hover, #navtop li.acupuncture a:focus, #navtop li.acupuncture a.focus {background : url("../pics/navtop/acupuncture.jpg") 0 -50px;}
    #navtop li.workshops a {background : url("../pics/navtop/workshops.jpg") 0 0; width : 108px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.workshops a:hover, #navtop li.workshops a:focus, #navtop li.workshops a.focus {background : url("../pics/navtop/workshops.jpg") 0 -50px;}
    #navtop li.teachertraining a {background : url("../pics/navtop/teachertraining.jpg") 0 0; width : 142px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.teachertraining a:hover, #navtop li.teachertraining a:focus, #navtop li.teachertraining a.focus {background : url("../pics/navtop/teachertraining.jpg") 0 -50px;}
    #navtop li.about a {background : url("../pics/navtop/about.jpg") 0 0; width : 72px; height : 50px; text-indent : -999999px; overflow : hidden;}
    #navtop li.about a:hover, #navtop li.about a:focus, #navtop li.about a.focus {background : url("../pics/navtop/about.jpg") 0 -50px;}

  2. #2
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe that your class definitions are being applied to the nested lists, so for example:
    Code css:
    #navtop li.yoga a {background : url("../pics/navtop/yoga.jpg") 0 0; width : 64px; height : 50px; text-indent : -999999px; overflow : hidden;}
    is not only being applied to the li element where you set:
    Code css:
    <li class="yoga"><a href="yoga/new_to_yoga.php">Yoga</a>
    but to all the following:
    Code css:
    <li class="yoga"><a href="yoga/new_to_yoga.php">Yoga</a>
             <ul>
                <li>Class Schedule</li>
                <li><a href="yoga/yoga_rates.php">Yoga Rates</a></li>
                <li><a href="yoga/testimonials.php">Testimonials</a></li>
                <li><a href="yoga/our_yoga_teachers.php">Our Yoga Teachers</a></li>
                <li><a href="yoga/prenatal_yoga_program.php">Prenatal Yoga Program</a></li>
                <li><a href="yoga/new_to_yoga.php">New to Yoga?</a></li>
                <li><a href="yoga/yoga_styles.php">Yoga Styles</a></li>
             </ul>
          </li>
    This is why your background images are being applied to all the options in the dropdown. Try removing the anchor from one of the nested menu list elements (like I've done above), you'll notice that the background image will not be applied to it.

    On another note, there is an error in your javascript; line 2; I think it should read:
    Code javascript:
    var sfEls = document.getElementById("navtop").getElementsByTagName("LI");
    and not
    Code javascript:
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    I hope this helps,
    YMas

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    As mentioned above you need to address the nested styles which will be affected by the cascade and over-rule any styles you want changed.

    e.g.
    Code:
    #wrap #navtop li li a{
        background:red;
        text-indent:0;
        height:auto;
        width:150px;
        text-align:left;
        padding:5px
    } 
    #wrap #navtop li li a:hover{color:#000}
    The id #wrap is added to provide more weight to the styles otherwise they won't be over-ruled.


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
  •