CSS Menu (4 Levels) - Joomla! Forum - community, help and support

hallo!

i'd have navigation 4 levels

here example: (blue=active, grey=inactiv)

link 1 (active)
--link 1.1
--link 1.2 (active)
--- link 1.2.1
--- link 1.2.2 (active)
---- link 1.2.2.1
---- link 1.2.2.2 (active)
link 2

every level (here active) should signed blue. (link 1 / link 1.2 / link 1.2.2 / link 1.2.2.2)

with existing css-code menu works in first levels not in level 3 , 4.

how need correct code work in level 3 , 4 ?

code: select all

/* main-navigation */

/* main-navigation: level 1 & 2 */

ul.menu {
   margin: 0;
   padding: 1px 0 0;
   list-style: none;
   background: url(../images/hdot2.gif) repeat-x top;
}

ul.menu li {
   margin: 0 !important;
   padding: 0 !important;
   background: none !important;
}

ul.menu li {
   font-family: arial, helvetica, sans-serif;
   font-size: 14px;
   padding: 3px 0;
   display: block;
   color: #333333;
   text-decoration: none;
   outline: none;
   padding-left: 16px;
   background-color: #ff0000;
   border-bottom-color: #ffffff;
   border-bottom-style: solid;
   border-bottom-width: 1px;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
   color: #006699;
   background-color: #ebebeb;
   text-decoration: none;
}

ul.menu li.active {
   background: url(../images/hdot2.gif) repeat-x bottom #ffffff;
   color: #006699;
   text-decoration: none;
   background-color:#ebebeb;
}

ul.menu li ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.menu li li {
   padding: 0 0 0 0px !important;
   list-style: none;
}

ul.menu li li {
   font-family: arial, helvetica, sans-serif;
   font-size: 12px;
   display: block;
   color: #333333;
   text-decoration: none;
   outline: none;
   padding-left: 30px;
   border-bottom-color: #ffffff;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   padding-top: 3px;
   padding-right: 0;
   padding-bottom: 3px;
}

ul.menu li li span {
   color: #333333;
   font-weight: normal;
}

ul.menu li li a:hover span,
ul.menu li li a:active span,
ul.menu li li a:focus span {
   color: #006699;
   text-decoration: none;
}

ul.menu li li.active {
   color: #006699;
   text-decoration: none;
   background-color:#ebebeb;
}

ul.menu li li.active span {
   color: #006699;
   display: block;
}

/* main-navigation: level 3 */

#nav ul.menu li li li {
   font-family: arial, helvetica, sans-serif;
   font-size: 12px;
   padding: 3px 0;
   display: block;
   color: #333333;
   text-decoration: none;
   outline: none;
   padding-left: 45px;
   border-bottom-color: #ffffff;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   background-color:#ebebeb;
}

#nav ul.menu li li li span{
   color: #333333;
   font-weight: normal;
}

ul.menu li li li a:hover span,
ul.menu li li li a:active span,
ul.menu li li li a:focus span{
   color: #ff0080;
   text-decoration: none;
}

#nav ul.menu li li li.active span{
   color: #006699;
   text-decoration: none;
   background-color:#ebebeb;
}

/* main-navigation: level 4 */

#nav ul.menu li li li li {
   font-family: arial, helvetica, sans-serif;
   font-size: 12px;
   padding: 3px 0;
   display: block;
   color: #333333;
   text-decoration: none;
   outline: none;
   padding-left: 60px;
   border-bottom-color: #ffffff;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   background-color:#ebebeb;
}

#nav ul.menu li li li li a{
   color: #333333;
   font-weight: normal;
}

ul.menu li li li li a:hover span,
ul.menu li li li li a:active span,
ul.menu li li li li a:focus span{
   color: #ff0080;
   text-decoration: none;
}

#nav ul.menu li li li li.active span{
   color: #006699;
   text-decoration: none;
   background-color:#ebebeb;
}


has answer problem, please? thankful.
:-(