CSS menu problem

[Zoom]

I have 4 levels in my menu.
1st level is OK
But when I move mouse over 2nd level menu item, menu expands not only 3rd but also 4th level
Problem is that 3rd level items has several "childs" each. And "childs" of second 3rd level item lie over the "childs" of first 3rd level item.
I want 4th level to expand only when the mouse is moved over 3rd level parent item
What should I do?

[Dr.CSS]

not sure which menu you are using but the CSS for menu...

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

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

add these to the menu for 4th level
by 3 levels it means 1. always seen level, 2. next level, 3. next level,

[pbrady]

Hi,

Your suggestion here helped me fix this problem too. However, I have a new problem that is related.

When I use the code below I expect to have each submenu display only when I mouseover the direct parent to the submenu in question.

I have 5 level menu and when I mouse over top menu, only second shows. When I mouse over the second, only third shows. But when I mouse over the third level, the fourth AND fifth shows.

How do I change this behavior so that when I mouse over the third level only the fourth level shows and not the fourth and fifth level?

I am using CMSMS 1.2 on Debian Etch 4.0 Linux with the following config:

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

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

[Dr.CSS]

You only have four levels of ul, add another set of these with one more ul, should work...

The menuparenth part is for IE6 which is where the IE6 JS comes in it adds h to the end...

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

[pbrady]

Thank you. That did the trick.