[SOLVED] Menu Manager displaying all levels at once

[RyanC]

Hi, I tried this in the Product Support but no takers. Maybe this is a better section of the forum to ask.

I am using Menu Manager, and I have four levels in my menu. However, when I add the following code (as suggested by the commenting to my style sheet), there is no change in my document.

/* 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,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul 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
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,{
display: block;
}

In my template, I have this:

{menu template="cssmenu.tpl" number_of_levels=4}

I am doing something wrong but I don't know what. Any menu item that has two or more children pages displays everything at once.

For an example please see this link, and click the "test page 2" menu item to see what I'm talking about..."test page 5" should be hidden until you select "test page 4".

I'd really appreciate any help with this.

[spcherub]

Did you make sure that the stylesheet where you have the code for menu is associated (attached) to the underlying page template?

[RyanC]

Hi spcherub,

I do have it linked... I tried pasting that code in again and it ends up adding extra spaces between menu items, so it's having an effect. But it's not having any effect on tucking those extra menus away.

This is my entire style sheet for the menu, maybe none of it is relevant but here's the whole thing:

#searchNavBar {
color:white;
}

#searchNavBar a:link, #searchNavBar a:visited {
color: white;
}

#searchNavBar a:hover, #searchNavBar a:active {
color: white;
}

#searchNavBar li {
color:white;
}


#searchNavBar ul {
color:white;
}


#searchNavBar ul li a {
color:white;
}

#menu_vert {
margin: 0;
padding: 0;
color: white;
}

.clearb {
/* needed for some browsers */
clear: both;
}

#menuwrapper {

/* IE6 Hack */
height: 1%;
width: auto;
margin: 0;
padding: 0;
z-Index:+1;
}



#primary-nav li li {
float: left;
clear: both;
width: 220px;
margin-left: 0px;
margin-top: -1px;
position: relative;
}


#primary-nav li li a.menuparent span {
/*sub current font color*/
/*color: black;*/
display: block;

}


ul#primary-nav li a {
font-size: 10px;
font-weight: normal;
padding: 0;
display: block;
text-decoration: none;

}

ul#primary-nav li a:hover {
background-color: gray;
margin: 0;
color: white;
display: block;
}

ul#primary-nav li ul {
/*dropdown color*/

background: #ed8d1c;
margin: 0px;
padding: 0px;
position: absolute;
width: auto;
height: auto;
display: none;
position: absolute;
z-index: 999;
/*opacity: 0.95;*/


-moz-box-shadow: 6px 6px 5px #888;
-webkit-box-shadow: 6px 6px 6px #888;
box-shadow: 6px 6px 5px #888;


}


ul#primary-nav ul ul {

margin-top: 0px;
margin-left: 0px;
left: 100%;
top: 0px;
background: black;

background: #e37024;
background: #c25708;


}



/*hover state*/

/*fix*/

ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding-left: 6px;
padding-top:3px;
padding-bottom: 3px;
font-weight: normal;
border-top: 0 none;
border-right: 0 none;
border-left: 0 none;
border-top: 1px solid #c25708;

}




/*hover state 2nd level*/
ul#primary-nav li ul ul a {
border-top: 1px solid #ed8d1c;

}


#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
}

#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;
}


#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;


}


I've searched on here and have founds all sorts of ways to manipulate this part of my template:

{menu template="cssmenu.tpl" number_of_levels=4}

like saying collapse or number of siblings or whatever, but I can't find the appropriate combination for making it hide those other levels.

[spcherub]

Try this for your CSS:
(May not be the most efficient, but worked in a test case I put together based on your situation)

Code: Select all

#menu_vert {
margin: 0;
padding: 0;
color: white;
}

.clearb {
/* needed for some browsers */
clear: both;
}

#menuwrapper {

/* IE6 Hack */
height: 1%;
width: auto;
margin: 0;
padding: 0;
z-Index:+1;
}

#primary-nav li li {
float: left;
clear: both;
width: 220px;
margin-left: 0px;
margin-top: -1px;
position: relative;
}

#primary-nav li li a.menuparent span {
/*sub current font color*/
/*color: black;*/
display: block;
}

ul#primary-nav li a {
font-size: 10px;
font-weight: normal;
padding: 0;
display: block;
text-decoration: none;

}

ul#primary-nav li a:hover {
background-color: gray;
margin: 0;
color: white;
display: block;
}

ul#primary-nav li ul {
/*dropdown color*/

background: #ed8d1c;
margin: 0px;
padding: 0px;
position: absolute;
width: auto;
height: auto;
display: none;
position: absolute;
z-index: 999;
/*opacity: 0.95;*/
-moz-box-shadow: 6px 6px 5px #888;
-webkit-box-shadow: 6px 6px 6px #888;
box-shadow: 6px 6px 5px #888;

}


ul#primary-nav ul ul {

margin-top: 0px; 
margin-left: 0px;
left: 100%;
top: 0px;
background: black;
background: #e37024;
background: #c25708;
}



/*hover state*/

/*fix*/

ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding-left: 6px;
padding-top:3px;
padding-bottom: 3px;
font-weight: normal;
border-top: 0 none;
border-right: 0 none;
border-left: 0 none; 
border-top: 1px solid #c25708;
}

/*hover state 2nd level*/
ul#primary-nav li ul ul a {
border-top: 1px solid #ed8d1c;
}

ul#primary-nav ul,
ul#primary-nav li:hover ul li ul,
ul#primary-nav li:hover ul li:hover ul li ul,
ul#primary-nav li:hover ul li:hover ul li:hover ul li ul {display:none;}

ul#primary-nav li:hover ul,
ul#primary-nav li:hover ul li:hover ul,
ul#primary-nav li:hover ul li:hover ul li:hover ul {display:block;}

[RyanC]

Yes!

Thank you so much, spcherub. I really appreciate it. That was driving me insane.