Dropdownmenü - Aktive Ebene eingeblendet lassen?!

Hallo Typo3-Gemeinde,

stehe jetzt schon tagelang richtig auf dem Schlauch, weil ich versuche ein Dropdownmenü zu erstellen,
wo die aktive Ebene eingeblendet bleiben soll.

Bei meinem Beispiel:
http://www.sunrock-gmbh.de/index.php?id=9
funktioniert das Menü, wie es bei Mortox.de super erklärt wurde.
Aber ich hätte gerne, wenn man hier auf "Maria" klickt, dass dann die nächste Ebene (in grau) eingeblendet bleibt, und wiederum die nächste Unterebene bei Hover ein-/ausgeblendet wird.

### Menü ###
temp.menu = HMENU
temp.menu {
    ### Erste Ebene ###
    1 = TMENU
    1 {
      wrap = <ul class="menu">|</ul>
      expAll = 1
      NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>

      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
      
      }
   
    ### Zweite, dritte und vierte Ebene (Kopieren von erster Ebene) ###
  2 < .1
  3 < .1
  4 < .1
}
page.10.subparts.HAUPTNAVI < temp.menu

Mein CSS

ul.menu, ul.menu ul {
    list-style-type: none;
}

ul.menu a {
  display: block;
  font-weight: normal;
  text-decoration: none;
  
}

ul.menu a.active {
  font-weight: bold;
}

.menuparent {
        /* aktives untermenu */
  visibility:visible; 
} 

ul.menu li, ul.menu ul ul li  {
  margin: 0;
  float: left;
  height: 20px;
  padding-top: 6px;
  padding-right: 10px;
  padding-bottom: 6px;
  padding-left: 10px;
  background-image: url(sunrock-pix/navi-hg-gelb.png);
  background-repeat: repeat;
  border-left:#000 solid 1px;
}
ul.menu li:first-child {
  border:0px;
}

ul li.active ul
{
  display: block;
}

/* Für Unterpunkte keine Float-Eigenschaft, doch weil sonst nix horizontal angezeigt wird */
ul.menu ul li {
 float: left;
background-image: url(sunrock-pix/navi-hg-grau.png);
  background-repeat: repeat;
}

/* Links auf Unterpunkten sollen die Hintergrundfarbe ändern */
ul.menu ul li.hover, ul.menu ul li:hover {
    background-color: #FFF9E4;
}

/* Zweite Ebene */
      ul.menu ul {
              margin:0;
                 padding: 0;
               position: absolute;
                display: none;
                    width: 600px;
     }

   /* Zweite Ebene anzeigen */
       ul.menu li.hover ul, ul.menu li:hover ul  {
               display: block;
   }

/* Dritte Ebene */
   ul.menu li.hover ul ul, ul.menu li:hover ul ul {
                  display: none;
                    margin-left: 0px; /* Breite eines Listenelements - Überlagerung 160px*/
             margin-top: 0px; /* Höhe eines Listenelements */
        }

   /* Dritte Ebene anzeigen */
       ul.menu li.hover ul li.hover ul, ul.menu li:hover ul li:hover ul {
                display: block;
   }


/* Vierte Ebene */
     ul.menu li.hover ul li.hover ul ul, ul.menu li:hover ul li:hover ul ul {
                  display: none;
    }

   /* Vierte Ebene anzeigen */
       ul.menu li.hover ul li.hover ul li.hover ul , ul.menu li:hover ul li:hover ul li:hover ul {
               display: block;
   }

Habe ich jetzt ein CSS- oder ein Typoscript-Problem.

Danke für jede kleine Erklärung.

Erschöpfte Grüße

Frank

vanlent schrieb

Habe ich jetzt ein CSS- oder ein Typoscript-Problem.

In Deiner CSS hast Du die Klassen „menuparent“ und „active“ (für die LI).

.menuparent {
/* aktives untermenu */
visibility:visible;
}
ul li.active ul {
display: block;
}

In Deinem TS ist aber nichts davon definiert.

vanlent schrieb

Aber ich hätte gerne, wenn man hier auf "Maria" klickt, dass dann die nächste Ebene (in grau) eingeblendet bleibt, und wiederum die nächste Unterebene bei Hover ein-/ausgeblendet wird.

Am einfachsten kannst Du das uber die Menü-Zustände „ACT“ und „CUR“ steuern.
Die Klasse „menuparent“ (ACT) blendet alle UL ein, die Klasse „active“ (CUR) unterbindet das für nachfolgenden Uls (außer bei li.active:hover)

.