Hi, it's been a while since I've worked on my CMSMS site, but I'm having an issue with my menu.
I have three levels, but I want the third level to be hidden until the second level is activated.
Thanks very much for any help.
[SOLVED] Menu Manager menu display
[SOLVED] Menu Manager menu display
Last edited by RyanC on Fri Oct 07, 2011 9:00 pm, edited 2 times in total.
Re: Menu Manager displaying levels I want hidden until hover
Update:
I've figured out that this part of the template shows all the levels:
{menu template="cssmenu.tpl" number_of_levels=4}
and this seems to be the relevant css:
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
But I'm not sure how these two work together. When I add the commented code to the code beneath it, nothing happens in my html document.
What I need solved is how can my menu have all the levels available but only show the levels when hovered over? I may have deleted something from the style sheet when I repurposed the styles, but I don't know what. I've searched the forums all day, reading the documentation, I can't find anything.
ideas anyone? I would appreciate it.
I've figured out that this part of the template shows all the levels:
{menu template="cssmenu.tpl" number_of_levels=4}
and this seems to be the relevant css:
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
But I'm not sure how these two work together. When I add the commented code to the code beneath it, nothing happens in my html document.
What I need solved is how can my menu have all the levels available but only show the levels when hovered over? I may have deleted something from the style sheet when I repurposed the styles, but I don't know what. I've searched the forums all day, reading the documentation, I can't find anything.
ideas anyone? I would appreciate it.
Re: Menu Manager displaying levels I want hidden until hover
Your CSS should look like this, note the , after each call but not at the end...
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul {
display: block;
}
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul {
display: block;
}
Re: Menu Manager displaying levels I want hidden until hover
Oh thanks, I had this solved in another thread but I forgot to notate it here!
Thanks for the code.
Thanks for the code.
