SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Issue With Multi Level CSS Menu

    I have added a multi level dropdown menu on the following linked page:

    LINK-
    http://tocdocs.com/new/

    The issue is visible when you rollover the "Services" tab in the main menu, which displays a sub menu. The sub menu has an additional menu listed under the "Therapy" tab which does reveal the tertiary menu of "Hand, Physical and Occupational" but the alignment is off. The top of that tertiary menu is bumped down below the button I would choose to have it aligned with. Can someone else take a look and let me know how to align the tertiary menu list items along side its parent button?

    Thanks in advance!
    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Member
    Join Date
    Apr 2011
    Location
    South Africa
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Todd, can you give your css code so I can look through it?

    ....................

    I found your CSS and the problem seems to me at this part of your css:

    #nav .services ul .multi span { padding: 0 0 0 150px; }

    The class for Therapy is multi. From what I can tell you didn't specify where it should go as you did the other classes. Add something like this. Just play around with the numbers until it lines up to the correct category:

    { background-position: -884px -245px; width: 100px; margin: 0 0 0 1px; }
    Last edited by susanv; Mar 19, 2013 at 10:31. Reason: More info

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by susanv View Post
    Hi Todd, can you give your css code so I can look through it?
    The CSS is embedded in the same document. You can find it inside the <head> tags. Hope this helps!
    Todd Temple > T2 Design

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Try removing this from your styles (line 29 in the head):

    Code:
    #nav li li {
    float: none;
    position: static;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    }
    and this, line 32:

    Code:
    #nav ul ul {
    top: auto !important;
    }
    and use this instead:

    Code:
    #nav ul li {position:relative;}
    #nav ul ul {top: 0;}
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Thanks so much ralph.m! I really appreciate it. You have helped me out so many times... well, you and Paul O'B! Thanks again.
    Todd Temple > T2 Design

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •