#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2008
    Posts
    5
    Rep Power
    0

    Four Level DropDown Menu


    I'm having trouble writing CSS for a nav menu that drops down to four levels. I'm able to drop down to three but I'm having a tough time with the fourth level. Please help.




    My CSS:


    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover {
    color:#3d4058;
    background:#ffffff;
    }
    .menu :hover > a, .menu ul ul :hover > a {
    color:#3d4058;
    background:#ffffff;
    }
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul, .menu ul a:hover ul {
    visibility:visible;
    }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul {
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul {
    visibility:visible;
    }
    /* make the 4th level hidden */
    .menu ul :hover ul :hover ul ul {
    visibility:hidden;
    }
    /* make the 4th level visible */
    .menu ul ul li:hover ul ul ul, .menu ul a:hover ul ul ul {
    visibility:visible;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2003
    Location
    Fort Collins, CO
    Posts
    287
    Rep Power
    18
    You might want to try the Son of Suckerfish dropdown menu method instead as it seems to work pretty well across multiple browsers now. Here's a tutorial on how to do single and multiple dropdowns with suckerfish:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Hope this helps.

    Peace.

IMN logo majestic logo threadwatch logo seochat tools logo