SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS Menu - Implementing "Second Level" sub-navigation

    Hello,

    I use this CSS code for all my websites. It is relatively straight forward and good for main navigation, and one level of dropdowns, but obviously is not built to handle the "second level" sub-navigation.

    Can anyone lend a hand or point me into the right direction? If you view the code you will see under services > skilled services, there is supposed to be a flyout to the right of the navigation.

    http://vismarkgroup.com/dev/helpmates/management.html

    Please excuse the CSS being in the header for now. I am slowly trying to ween my co-worker off of dreamweaver (he designed the site).

    Thanks ahead of time!

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

    For another level just follow the same plan as usual but just remember that when you shows the first level you must then hide the second level.
    e.g.
    li:hover ul{left:0}
    li:hover li ul{margin-left:-999em}

    Then when you show the second level you must move it 175px from the left otherwise it will be under the first dropdown. (also move it to to top:0 at the same time.
    e.g.
    li li:hover ul {
    margin-left: 175px;
    top:0;
    }


    Here's the full code for the extra level:
    Code:
    ul#nav li:hover li ul,ul#nav li.sfhover li ul {margin-left: -999em;}
    ul#nav li li:hover ul, #nav li li.sfhover ul {
        margin-left: 175px;
        top:0;
    }

  3. #3
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you so much for the reply. Although it seems to not be working? Maybe a problem in my html for the menu itself?

    Also, we dont necessarily need the "second level" to hide when the third level shows if that makes it easier?

    http://vismarkgroup.com/dev/helpmates/management.html


    Any additional help would be appreciated!

    Drew

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Drew,

    I just added my code above to your site via firebug and it worked straight away. I don't see that you have added my code anywhere.

    Also, we dont necessarily need the "second level" to hide when the third level shows if that makes it easier?
    You misunderstand me

    You are never hiding the currently hovered menu only the deeper nested menus.

    When you say "li:hover ul {left:0}" that will show all nested uls at once. If you had ten nested menus then ten levels would be shown. You only want to show the next level only and hide any deeper nested menus.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Argh, we have two dev sites for this client and i updated the wrong one

    As always thank you so much for your help.

    Cheers


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
  •