Dropdown Menue durch klick öffnen..Brauch Hilfe von euch!?

[Bengman]

Hey Leute, Ich stehe vor einem Rätsel: Wie öffne Ich das Dropdown Menue durch einen Klick ohne Javascript zu können?
Ich weiß ohne Javascript geht es nicht, also wollte Ich fragen ob mir da einer helfen kann.
Mein Code ist folgender:

<nav>
  <div id="navigation">

    <div id="navigation2">

     <ul id="seiten">
      <li class="home">
      <a href=""><h3>Startseite</h3></a>
      <div id="homeseite">
      .
      </div>
      </li>

      <li class="gästebuch"><a href="#"><h3>G&auml;stebuch</h3></a></li>


      <li class="sozialenetzwerke">
      <a href="#"><h3>Soziale Netzwerke</h3></a>
      <div id="soialenetzwerkeseite">
      .
      </div>
      </li>

      <li class="partner">
      <a href=""><h3>Partner</h3></a>
      <div id="partnerseite">
      .
      </div>
      </li>

      <li class="forum"><a href="#"><h3>Forum</h3></a></li>

      <li class="server">
      <a href="#"><h3>Server</h3></a>
      <div id="serverseite">
      .
      </div>
      </li>

      <li class="teamspeak">
      <a href=""><h3>TeamSpeak</h3></a>
      <div id="teamspeakseite">
      .
      </div>
      </li>

      <li class="kontakt">
      <a href="#"><h3>Kontakt</h3></a>
      <div id="kotaktseite">
      .
      </div>
      </li>
     </ul>

    </div>

  </div>
</nav>

Und CSS:

ul#seiten li div
       {
        display: block;
       }ul#seiten li div:hover { display: block; }


ul#seiten li>div
       {
        display: none;
       } ul#seiten li:hover>div { display: block; }

Im Moment öffnet sich das Menue halt wenn ich drüber gehe...
Aber es soll sich ja öffnen wenn man klickt!
Also kann mir einer behilflich sein und mir den fertigen jvs code senden?
Ich habe mich bis jetzt halt noch nicht an jvs rangewagt, wollte es aber auch noch lernen, aber Ich brauche das jetzt wirklich auf die schnelle!

Vielen Dank schonmal! :)

 

[Sempervivum]

Bin zwar nicht so der CSS-Experte, aber probiere es mal mit der Pseudoklasse :active statt :hover.

 

[Bengman]

Habe Ich schon, dann sieht man es nur wenn man gedrückt hält. Auch focus klappt nicht. Habe mich dann bei Google schlau gemacht und erfahren das man das nur mit Javascript richten kann.

 

[Sempervivum]

Hm, es gibt auf jeden Fall reine CSS-Galerien, die auf Klick funktionieren, z. B. hier:
http://www.cssplay.co.uk/menu/cssplay-click-radio-gallery.html
Allerdings wird dort ein Trick angewendet, indem man Radiobuttons verwendet und die Pseudoklasse :checked.

 

[Sempervivum]

PS: Ich sehe da noch ein generelles Problem: In den li-Elementen hast Du ein a-href-Tag. Was willst Du nun beim Klick, soll der Link ausgeführt werden oder das div sichtbar gemacht werden? Es geht nur eines von beiden. Ohne Link wäre es mit jQuery sehr einfach:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("ul#seiten li").on("click", function () {
$(this).children("div").slideToggle("slow");
return false;
});
});
</script>

 

[Tronjer]

Navbar von Bootstrap einbinden:

http://getbootstrap.com/components/#navbar

 

[Bengman]

@Sempervivum Vielen Dank! :)