SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish flyout not working

    I'm using the suckerfish example for my CSS vertical menu with just one flyout level. I thought it was straight foward but the flyout does not even show up. I've gone through other posts and tried various code snipets to get it to work, but no luck.

    Here is my CSS code
    PHP Code:
    /*----Body Left Panel Menu----*/
    #leftPan{width:114px; float:left;}
    #leftPan h2{width:114px; height:34px; background:#fff; color:#5F7A77; font-size:18px; line-height:34px;}
    #leftPan ul{width:114px;}
    #leftPan ul li{width:114px; height:24px;}
    #leftPan ul li a{width:102px; height:24px; display:block; background:url(images/bullet2-normal.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:24px; padding:0 0 0 12px;}
    #leftPan ul li a:hover{background:url(images/bullet2-hover.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none;}
    #leftPan ul li span{text-decoration:underline;}
    /* second-level lists */
    #leftPan li ul{position:absolute; left:-999em; margin-left:11.05em; margin-top:-1.35em; z-index:1;}
    #leftpan li:hover ul, #leftpan li li:hover ul, #leftpan li li li:hover ul, #leftpan li.sfhover ul, #leftpan li li.sfhover ul, #leftpan li li li.sfhover ul {/* lists nested under hovered list items */left:auto;} 
    Now here is the webpage section
    PHP Code:
    <div id="leftPan">
    <
    ul>
       <
    li><a href="#" target="_blank">Menu Test</a>
        <
    ul>
         <
    li><a href="#" target="_blank">Test Flyout</a></li>
        </
    ul>
       </
    li>
       <
    li><a href="#" target="_blank">Menu Test</a></li>
    </
    ul
    I'm using the same javascript as suckerfish just substituting the id NAV for leftpan. I'm not sure what to troubleshoot next?
    Last edited by jgsketch; Apr 26, 2007 at 12:25. Reason: wrong code

  2. #2
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. I needed to put the id in the UL tag as well, not just the DIV tag. Now I just need to work on the positioning, the flyout sits way out on the right, far away from the menu. But I think I know how to fix that.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I figured it out. I needed to put the id in the UL tag as well, not just the DIV tag.
    You can't use the same ID twice if that's what you were saying.

    In your code above you have mixed the case of the part that will display the menu.

    Code:
    #leftpan li:hover ul,etc....
    It should be:

    Code:
    #leftPan li:hover ul,
    classes and ID's are case sensitive.

    Its appearing to the right because you have applied a margin-left of 11.05em which could be reduced to match what is required.

  4. #4
    Mad Beach Bum jgsketch's Avatar
    Join Date
    Aug 2002
    Location
    FL
    Posts
    825
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I did not notcie the case issue. Something so simple too. That is why I was having problems before.


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
  •