Untermenü statt bei hover ausfahren erst bei anklicken...

[KingLu]

Hi Leute,

Ich arbeite gerade an einer Webseite mit einem senkrechten Menü! (soll ein Wiki werden....)


So hab folgendes Problem!
Ich will Überpunkte haben also z.b
Hauptthema:
--> Unterthema1
--> Unterthema2
Hauptthema2
Hauptthema3
Haupthema4
ich habe es momentan so, das wenn ich über Hauptthema fahre klappen die Unterthemen auf!

Das Problem ist sobald ich Unterthem2 verlasse klappt das logischerweiße ein und ich zeige mit der Maus auf Haupthema 4 anstatt auf Hauptthema2.. So muss ich von unten nach oben fahren um das Hauptthema2 zu erreichen
--> Total umständlich!

deswegen würde ich es gerne so haben das die Unterthemen nur aufklappen wenn ich auf Haupthema1 geklickt habe! also auf den "Link"!

Geht das?

hier mein bisheriger Code!

                 <div class="menuhover"> 
                          <li><a href="2pageAdmin.php">&raquo; Nebenseite1</a></li>  
                      </div>
                       <div class="menuhoveron">   
                           <li><a href="2pageAdmin.php">&raquo; Subside1</a></li>    
                           <li><a href="2pageAdmin.php">&raquo; Subside2</a></li>
                           <li><a href="2pageAdmin.php">&raquo; Subside3</a></li>
                      </div>

hier hierzugehöriger css code!

.menuhoveron{
    margin-right: 0px;
    padding-left: 15px;
    width: auto;
    height: 0;
    overflow: hidden;
    transition:height 0.5s ease-in-out;
    -moz-transition:height 0.5s ease-in-out;
    -webkit-transition:height 0.5s ease-in-out;
    -o-transition:height 0.5s ease-in-out;
    -ms-transition: height 0.5s ease-in-out;
}
.menuhover:hover + .menuhoveron, .menuhoveron:hover {
    height: auto;
    overflow: visible;
}

Hab schon gegoogelt aber nur möglichkeiten mit java gefunden bzw wurde gesagt das damit möglich wäre, verstehe von javascript aber nur Bahnhof. Geht das den eventuell auch mit CSS?

 

[scbawik]

Erstens, <li>'s gehören in <ul>'s oder <ol>'s, aber nicht in <div>'s.

Wenn du das korrigiert hast, sollte das (so oder so ähnlich) funktionieren:

ul.menuhover {
    display:block;
    list-style:none;
}
ul.menuhover li {
    display:block;
}
ul.menuhover ul.menuhoveron {
    display:none;
    list-style:none;
}

ul.menuhover ul.menuhoveron li {
    display:block;
}
ul.menuhover:hover ul.menuhoveron {
    display:block;
}

EDIT: Habe gerade erst die transitions gesehen, dann wirds etwas komplizierter, vom Prinzip her aber etwa gleich.