I have a menu with three levels of links and I have found that the css you use does not provide for this number of levels. I would see the third level always open when opening the second. I have re-written the CSS using: http://www.xs4all.nl/~peterned/csshover.html as a guide and have come up with this:

ul.nice-menu ul, 
ul.nice-menu li:hover ul ul, ul.nice-menu li.over ul ul,
ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li.over li.over ul ul { 
  display:none; 
} 

ul.nice-menu li:hover ul, ul.nice-menu li.over ul,
ul.nice-menu li:hover li:hover ul, ul.nice-menu li.over li.over ul,
ul.nice-menu li:hover li:hover li:hover ul, ul.nice-menu li.over li.over li.over ul { 
  display:block; 
}

Also the links did not display correctly so I adjusted them with this:

ul.nice-menu-down ul ul {
  width: 12.5em;
  left: 12.5em;
  top: -5px;
}

With these alterations you can now have this structure:

link1  link2^  link3
       link4
       link5>  link7
       link6   link8>  link10
               link9   link11
CommentFileSizeAuthor
#10 nice_menus_hide_children_0.patch1.37 KBadd1sun
#9 nice_menus_hide_children.patch959 bytesadd1sun

Comments

gumnaam1’s picture

gumnaam1 commented

Wow this is exactly I was looking for.
btw. is this fix limited to level -3 or goes down any number of levels.

cooperaj’s picture

cooperaj commented

Yes, it is limited to 3 levels. But it's just a case of adding more rules to the first block of code I posted. The syntax should be obvious but just in case here is a four level snippet

ul.nice-menu ul,
ul.nice-menu li:hover ul ul, ul.nice-menu li.over ul ul,
ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li.over li.over ul ul,
ul.nice-menu li:hover li:hover li:hover ul ul, ul.nice-menu li.over li.over li.over ul ul {
  display:none;
}

ul.nice-menu li:hover ul, ul.nice-menu li.over ul,
ul.nice-menu li:hover li:hover ul, ul.nice-menu li.over li.over ul,
ul.nice-menu li:hover li:hover li:hover ul, ul.nice-menu li.over li.over li.over ul,
ul.nice-menu li:hover li:hover li:hover li:hover ul, ul.nice-menu li.over li.over li.over li.over ul {
  display:block;
}
steveparks’s picture

steveparks commented

Thanks very much - that solved a problem that I'd been tearing my hair out about!

You've just demonstrated the best thing about open source

Thanks
Steve

liquidcms’s picture

liquidcms commented

whooo hooo.. too cool...

thanks.

irishsuperfly’s picture

irishsuperfly commented

Thanks! This helped me greatly - I have 4 levels and things were pretty mixed up after I upgraded.

jeffreyblove’s picture

jeffreyblove commented

IE7 issues show expanded

  • after the menu has closed and re-expanded. I added it here - http://drupal.org/node/113965 - but I think it is related. I've tried to add the same css logic to the initial /* hide submenus */, but have not been successful.

    Cheers,
    JeffL

    • add1sun’s picture

    add1sun commented
    Version: 6.x-2.x-dev » 5.x-1.x-dev

    changing this to the 5 dev version since that is where active work is going on.

    add1sun’s picture

    add1sun commented
    Status: Active » Needs review

    Here is a patch that makes third and fourth level children only pop when the immediate parent is hovered.

    add1sun’s picture

    add1sun commented
    StatusFileSize
    new nice_menus_hide_children.patch959 bytes

    *sigh* I'm really tired. Attaching the patch this time.

    add1sun’s picture

    add1sun commented
    StatusFileSize
    new nice_menus_hide_children_0.patch1.37 KB

    New patch. The fourth *child* now pops up (fourth level meant third child). This means you can have menus thusly:

    Main Item > child 1 > child2 > child 3 > child 4

    I don't think we need more levels than that since menus deeper than that should probably be rethought anyway and folks can see the css pattern that makes it happen and customize it more levels themselves if they need it.

    Please test this so we can get it in. Thanks.

    add1sun’s picture

    add1sun commented
    Status: Needs review » Fixed

    Applied to the 5 branch.

    Anonymous’s picture

    (not verified) commented
    Status: Fixed » Closed (fixed)