I have been having 3 level menu problems for months and every now and then I work on it, never getting it sorted. With the site due to be finished soon I need some help.
I even changed from ListmenuX to DropMenu just in case that would make it easier.
I am pretty sure its all to do with not understanding the selectors as well as i thought I did and maybe some inheritance issues?
My structure looks like this (the colours are my attempt to make it easy to follow, and are not related to the actual menu colour):
Menu 1
--Submenu 1
Menu 2
--Submenu 2
--Submenu 3
----Sub Submenu 1
--Submenu 4
The goal is that all Submenus are hidden until the direct pearent is selected, so
Submenu 2, 3 & 4 are only visible when
Menu 2 is selected,
Sub Submenu 1 will stay hidden until
Submenu 3 is selected
I assumed (obviously incorrectly) that if
#menu ul was
Menu and
#menu ul ul was
Submenu then
#menu ul ul ul would be
Sub Submenu.
However what happens is soon as I select
Menu 2,
Submenus 2, 3, 4 are visible but so is
Sub Submenu 1.
#menu ul{ /* Menu */
margin: 0;
padding-bottom: 20px;
padding-left: 10px;
}
#menu ul ul{ /* Menu > Submenu */
display: none;
}
#menu ul ul ul{ /* Menu > Submenu > Sub Submenu*/
display: none;
}
#menu li{ /* Menu items */
list-style: none;
padding: 2px 0 2px 0px;
height: auto !important;
height: 1%;
font-size: 1.0em;
}
#menu li.here{ /* current Menu item*/
color: #000080;
}
#menu li.here ul{ /* Menu > current Submenu items*/
display: block;
padding: 5px 0px 5px 20px;
color: #000080;
font-size: 1.0em;
}
The next issue is the coloring, and thats a little more confussing, but I guess its related to the above issue.
Menu 1
--Submenu 1
Menu 2
--Submenu 2
--Submenu 3
----Sub Submenu 1
--Submenu 4
When a
Submenu is selected and there is no
Sub Submenu present (eg
Submenu 1) it changes colour, however when a
Sub Submenu is present (eg
Submenu 3), the
Submenu doesn’t change colour.
If I then select the
Sub Submenu the
Sub Submenu changes colour as intended.
☆ A M B ☆
MODX Staff