SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Space in second ul

    Hi all
    If you mouse over the procedure tab on the top navigation and then the items of the list that appear there is a space so it is not tight up against the top navigation. How do I get rid of this space? Thank you http://tinyurl.com/7mmplrk

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In your CSS find the following selector "#suckerfishnav li ul ul" and change the top margin from -33px to -35px.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

  4. #4
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As SgtLegend has said, the gap above the second level dropdown is caused by the -33px margin on #suckerfishnav li ul ul not matching the height of the parent li. But as the li height may vary depending on whether the text wraps to more than one line or if the user's browser is set to display a larger text size, the negative margin approach is fragile.

    Instead, you could swap to absolutely positioning the ul. For this you'd need to give the parent - #suckerfishnav li li - position:relative. With the ul set to top:0 it will sit flush with the top of the li. Only margin-left is required for the ul to be pushed to the right of the li.

    Altogether it requires two lines to be added and one changed.

    Code CSS:
    #suckerfishnav li li {
      font-family:"Trebuchet MS",sans-serif;
      font-size: 14px;
      font-weight: normal;
      position: relative; /* added */
      width: 220px;
    }
     
    #suckerfishnav li ul ul {
      background-repeat: repeat;
      margin-left: 220px; /* changed */
      top: 0; /* added */
    }

    If the user increases text size or text wraps in the li, the sub-sub menu will now continue to align with the top of its parent li.

    Edit: check your CSS validation - there are non-standard quote characters around Trebuchet MS and a parse error.


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
  •