Reines HTML- und CSS-Toggel-Dropdownmenü

[Snugel]

Hallo Forum!

Nach dem ich mich eine Weile mit der Suche beschäftigt hatte, habe ich festgestellt das ich nichts passendes finde. Ob der Thread in dem Forum richtig ist, weil er neben HTML auch CSS mit Thematisiert weiß ich nicht. Also bitte gegebenenfalls verschieben.

Nun zur Problemstellung: Ich will ein Dropdown-Menü für Mobildevices. erstellen. Ich habe dafür ein 1 KB großes png-File, mit drei Linien und einem Hintergrund. Wenn ich nun die Maus über das png-File bewege (:hover) oder via Touch das Image fokussiere (:focus), dann soll sich das Menü öffnen und die Hauptmenüeinträge sollen erscheinen. Wenn ich dann einen Eintrag selektiere soll mit der Pseudoklasse :active der Punkt der selektiert wurde hervorgeheben werden und gegebenenfalls Submenüs angezeigt werden. Dabei ist zu berücksichtigen das max. drei Menüebenen geben soll. Bsp.:

Hauptmenü (1te. Ebene) = hl (HL)

	Submenü (2te. Ebene) = s1l (S1L)

		Submenü des Submenüs (3te. Ebene) = s2l (S2L)

Nun habe ich auch in die Richtung schon was vorbereitet an HTML-Code, den ich Euch in keinem Fall vorenthalten will.

Eventuell von Bedeutung: Der nachfolgende section Tag, ist Teil des Strukturelements header. Im Header (ID = a) gibt es auch weitere section- und span-Tags. Dabei gibt es die IDs aa, ab, ac und ad. Die section-ID ad beinhaltet das Mobdev-Menü und eine Statusleiste. Die Statusleiste ist, da sie über eine andere ID und class angesprochen wird noch nicht relevant. Sie bekommt eventuell eine extra section, je nach Inhaltsumfang.

Zur Lösung: Die Lösung soll rein auf dem Prinzip von HTML und CSS basieren ohne JavaScript oder anderweitigen Programmier- Script- etc. Sprachen.

Der (mein) HTML-Teil:

`<section id="ad" class="ad" title="container">

	<nav  id="ad-1" class="ad-1" title="mobdev-navbar">

		<img src="image/statusbar/Mobildev.png" alt="Bild" title="mobildevice-menü-picture"/>

		<ul  id="ad-1h" class="ad-12h" title="hauptmenü">

			<hr>

			<li  id="ad-12hl" class="ad-12hl" title="mobdev-hauptmenüliste>

				<a href="#">

					Linktext

				</a>

				<ul  id="ad-12s1" class="ad-12s1" title="submenü">

					<hr>

					<li  id="ad-12s1l" class="ad-12s1l" title="mobdev-submenüliste>

						<a href="#">

							Linktext

						</a>

						<ul  id="ad-12s2" class="ad-12s2" title="submenü">

							<hr>

							<li  id="ad-12s2l" class="ad-12s2l" title="mobdev-submenüliste>

								<a href="#">

									Linktext

								</a>

							</li>

						</ul>

					</li>

				</ul>

			</li>

		</ul>

	</nav>

	<section id="statusbar" class="statusbar" title="statusbar">

	</section>

</section>`

Mein CSS-Teil war nur Müll. Ich kam selber derweil durcheinander und habe in gelöscht. Ich wäre froh, wenn nur die Funktion von :hover und :focus sowohl beim Image, als auch bei den Submenüeinträgen funktionieren würde. Irgendwie sehe ich den Wald vor lauter... CSS nicht mehr.

Vielen Dank,

Snugel