Responsives Menü ausklappen

piti87

Guten Abend!

Ich versuche gerade ein responsives Menü zu realisieren.

Wenn folgende Seite <= 500 Pixel (!) angezeigt wird

http://www.f1.cgs.onlinebusiness.cc/

sollte, mit einem Klick auf die grüne Schaltfläche "show menu" eigentlich das Menü in der ersten Ebene ausklappen und bei einem Hover über eine Hauptseite mit Unterseiten, sollten die Unterseiten ausklappen.

Leider klappt dies nicht.

Es hängt wohl an folgendem CSS, aber ich finde nicht die Ursache:

Code:
/*Show menu when invisible checkbox is checked*/
#mobmenuprev input[type=checkbox]:checked ~ #mobmenuspace ul {
display: block;
}

/*Display the dropdown on hover*/
#mobmenuspace ul li a:hover + .hidden, #mobmenuspace .hidden:hover {
display: block;
}

Wenn ich

#mobmenuspace ul
#mobmenuspace li ul

in den Firefox Webdevelopertools manuell auf "display:block;" schalte funktioniert es!

Hat jemand eine Idee?

Vielen lieben Dank!

djheke

Habe dir mal eine :focus Variante gebastelt.Villeicht kannst du es ja gebrauchen.

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>Text des Titels</title>
<style>




section , nav  {
 position:relative;
 outline:none;
}
nav ul , nav li {
 margin:0;
 padding:0;
 list-style:none;
 background:#eee;
}




nav li {
 display:inline-block;
 position:relative;
}




nav a {
 display:block;
 padding:10px;
 text-decoration:none;
 color:#000;
}




nav a:hover {
 color:#f00;
}




nav li ul {
 position:absolute;
 left:-9999em;
 top:-9999em;
}




nav li li {
 display:block;
 width:200px;
}
nav li:hover ul  {
 left:0;
 top:auto;
}








@media (max-width: 640px) {




nav:before {
  display:block;
  content:"|||";
  padding: 10px;  
  background:#a33;
  color:#fff;
  cursor:pointer;
  font-weight:bold;
}
nav ul {
 height:0;
 overflow:hidden;
}




nav li {
 display:block;
}
nav li ul {
 padding-left:2em;
}
nav:focus ul , ul:active  {
 position:relative;
 height:auto;
 top:auto;
 left:0;
}




section p:before {
 content:"X";
 position:absolute;
 top:0;right:0;
 padding: 10px;  
 background:#09c;
 color:#fff;
 cursor:pointer;
 font-weight:bold;
}








</style>
</head> 
<body>
<section>
<nav tabindex="0">
<ul>
<li><a tabindex="0"  href="start/">Start</a></li>
<li><a tabindex="0"  href="ueber-uns/">Über uns</a>
 <ul class="hidden">
  <li><a  tabindex="0"  href="ueber-uns/einblicke/">Einblicke</a></li>
  <li><a  tabindex="0"  href="ueber-uns/wir-auf-facebook/">Wir auf Facebook</a></li>
  <li><a  tabindex="0"  href="ueber-uns/partner/">Partner</a></li>
  <li><a  tabindex="0"  href="ueber-uns/subpage-2/">Sargschmuck</a></li>
  <li><a  tabindex="0"  href="ueber-uns/idden-urnenschmuck/">Urnenschmuck</a></li>
  <li><a  tabindex="0"  href="ueber-uns/kraenze/">Kränze</a></li>
  <li><a  tabindex="0"  href="ueber-uns/gestecke/">Gestecke</a></li>
 </ul>
</li>
<li><a tabindex="0"  href="aktuelles/">Friedhöfe</a></li>
<li><a tabindex="0"  href="bestattung/">Bestattung</a>
 <ul class="hidden"><li><a tabindex="0"  href="bestattung/erdbestattung/">Erdbestattung</a></li>
  <li><a tabindex="0"  href="bestattung/feuerbestattung/">Feuerbestattung</a></li>
  <li><a tabindex="0"  href="bestattung/urnenbeisetzung/">Seebestattung</a></li>
  <li><a tabindex="0"  href="bestattung/r/">Diamantbestattung</a></li>
  <li><a tabindex="0"  href="bestattung/seebestattung/">Friedwald</a></li>
  <li><a tabindex="0"  href="bestattung/urne-zu-hause/">Urne "zu Hause"</a></li>
  <li><a tabindex="0"  href="bestattung/thanatopraxie/">Thanatopraxie</a></li>
  <li><a tabindex="0"  href="bestattung/bestattungsvorsorge/">Bestattungsvorsorge</a></li>
  <li><a tabindex="0"  href="bestattung/kosten/">Kosten</a></li>
 </ul>
</li>
<li><a tabindex="0"  href="trauerfall/">Trauerfall</a>
 <ul><li><a tabindex="0"  href="trauerfall/1/">Benötigte Unterlagen</a></li>
  <li><a tabindex="0"  href="trauerfall/wenn-ein-kind-stirbt/">Sozialbestattung</a></li>
  <li><a tabindex="0"  href="trauerfall/bestattung-von-amtswegen/">Wenn ein Kind stirbt</a></li>
  <li><a tabindex="0"  href="trauerfall/besondere-bestattung/">Exklusiv</a></li>
 </ul>
</li>
<li><a tabindex="0"  href="downloads/">Trauerartikel</a>
 <ul><li><a tabindex="0"  href="downloads/saerge/">Särge</a></li>
  <li><a tabindex="0"  href="downloads/urnen/">Urnen</a></li>
  <li><a tabindex="0"  href="downloads/shop/">Wäsche</a></li>
 </ul>
</li>
<li><a tabindex="0"  href="kontakt/">Kontakt</a>
 <ul><li><a tabindex="0"  href="kontakt/datenschutz/">Datenschutz</a></li>
  <li><a tabindex="0"  href="kontakt/impressum/">Impressum</a></li>
 </ul>
</li>
</ul>
</nav>
<p tabindex="0"></p>
</section>
</body>
</html>

Alles anzeigen

@edit
Wie ich sehe, hast du es wohl hinbekommen. Bedenke aber, dass mobile Geräte kein Hover können bzw. nur eingeschränlt.
Noch was, haltet euch an den Forenregeln(Crossposting)
http://xhtmlforum.de/73010-responsives-men-ausklappen.html

Responsives Menü ausklappen

Tags

Benutzer online in diesem Thema