SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish Drop-down Menus Problem

    Hello,

    This is my first time creating a pure CSS website and I am having trouble implementing a "Suckerfish" Drop-down menu from alistapart.com (http://www.alistapart.com/articles/dropdowns/). When viewing the site in IE, the Drop down menus is showed on the right while in Firefox/Safari, the Drop down menus are all over the place.


    /* ----- NAVIGATION ----- */
    #navWrapper {
    height: 30px;
    color: #6C6C6C;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    background: url(images/mainNavBg.gif) repeat-x;
    }

    #mainNav {
    font-size: 1.1em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    }

    ul#mainNav {
    padding: 0;
    list-style: none;
    width: 900px;
    float: left;
    position: relative;
    margin-left: -450px;
    left: 50%;
    }

    ul#mainNav li {
    float: left;
    position: relative;}

    ul#mainNav li a {
    display: block;
    float: left;
    padding: 0 1.4em;
    line-height: 2.1em;
    text-decoration: none;
    background: url(images/divider.gif) repeat-y left top;
    color: #666666;

    }

    ul#mainNav li.last a {
    border-right: 1px solid #a7a7a7;
    }

    ul#mainNav li a:hover {
    color: #fff;
    background: url(images/mainNavHover.gif) repeat-x;
    }

    ul#mainNav ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    li ul {
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
    }

    li > ul {
    top: auto;
    left: auto;
    }

    li:hover ul {
    display: block;
    }
    The problem can be seen at http://www.jarvandsher.com/site/. Please let me know what I am doing wrong. All I want is to create a simple down menu for the my menu bar like www.adobe.com . Thanks.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Yeah, they updated the menu but failed to publish it to ALA.

    By the way, welcome to SitePoint!

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'll give it a try and let you know how it works out.

    Also, thanks for the welcome. Hope to learn a lot from this forums.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was able to get the drop-down menus working, but I can't rollover it and the content is overlapping the drop-down menu. I believe I need to "clear" content, but I'm not sure which CSS code I need to clear.

    Here is a snapshot of the bug:


    Here is the link to the HTML/CSS: www.jarvandsher.com/site

    /* ----- NAVIGATION ----- */

    #navWrapper {
    height: 30px;
    color: #6C6C6C;
    border-top: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
    background: url(images/mainNavBg.gif) repeat-x;
    }

    #mainNav {
    font-size: 1.1em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    }

    #mainNav, #mainNav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    #mainNav a {
    display: block;
    }

    ul#mainNav {
    width: 900px;
    float: left;
    position: relative;
    margin-left: -450px;
    left: 50%;
    }

    #mainNav li {
    float: left;
    }

    ul#mainNav li a {
    padding: 0 1.4em;
    line-height: 2.1em;
    background: url(images/divider.gif) repeat-y left top;
    color: #666666;
    }

    #mainNav li ul li a {
    display:block;
    width: 8.2em;
    font-size: .9em;
    line-height: 2.1em;
    background: none;
    font-weight: normal;
    text-transform: none;
    }

    #mainNav li ul li a:hover {
    text-decoration: none;
    color: #4D7FC1;
    background: #E7E7E7;
    }

    #mainNav li ul {
    position: absolute;
    background: #F7F7F7;
    border: 1px solid #CECECE;
    width: 10em;
    left: -999em;
    }

    #mainNav li:hover ul {
    left: auto;
    }
    Please let me know whenever you get the chance. Thanks, I appreciate your help.


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
  •