Problem mit Dropdown Menu, fehlt 1 schritt.

[MyComputerTIPS]

Hallo,
ich weiß das ich hier viele Threads erstelle aber es ist nur deswegen das es gut für die Suchmaschine ist und es wird leichter zu finden sein für andere Nutzer die vielleicht das gleiche Problem haben.

Ich hab meine Navigation bisschen verändert und jetzt habe ich ein Problem.

Hier ist die Navigation:

<nav>
<ul class="group">
<li><a href="index.html">Home</a></li>
<li>
<a class="topmenu" href="hw.html">Hardware</a>
<ul class="submenu">
<li><a href="#">Submenu</a></li>
</ul>
</li>
</li>
<li><a href="sf.html">Software</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="tuning.html">Tuning</a></li>
<li><a href="web.html">Web</a></li>
</ul>
</nav>

Hier ist das CSS von der Navigation


.submenu{
position:absolute;
margin-top:20px;
margin-left:61px;
}

.topmenu .submenu:hover{
position:absolute;
margin-top:20px;
margin-left:61px;
}

Ich weiß nicht wie ich die Hover funktion dem Submenu gebe.

Also wenn ich über Hardware gehe soll Submenu angezeigt werden.
Ich weiß nicht wie. Ich weiß man braucht dafür ":hover" und "z-index:-1" und "z-index:1".
Ich weiß halt nicht wie ich diesen "Pfad" machen soll.

Pfad? (Weiß nicht ob man das so nennt.)

.topmenu .submenu:hover{

Vorschau
Ich hab denn Link bisschen verdeckt damit ich kein ärger wegen "Werbung" bekomme.
Also verdeckt meine ich das es nicht Example Domain steht.

 

[Ap0ll0XT]

Den z-index benötigst du nicht. Mit position: relative; nimmst du das Element sowieso aus dem Textfluss. Ein gutes Beispiel samt Code findest du hier: CSS-Tutorial: Aufklappmenü (Drop-Down Menü) | www.silent-fran.de

Was auch gerne genutzt wird und ich auch persönlich am besten finde, sind Kombinatoren. Ein solcher Kombinator ist im Grunde eine Art bedingte Formatierung, bei der du das Ziel einer Formatierung auf ein einzelnes Element in direkter Beziehung eingrenzen kannst, ohne andere Elemente mit der selben Klasse zu beeinflussen: CSS/Selektoren/Kombinator – SELFHTML-Wiki

Ein beispiel samt Code für ein Drop-Down mit Kombinator: Simple Pure CSS Drop Down Menu

Wie du es am Ende machst, bleibt aber dir überlassen.

 

[MyComputerTIPS]

Ich hab mir früher ein code auch mit "marigin" dropdown downgeloaded und hab mir das halt so gemacht ob das mit Hidden geht??? hmm

<style>
.submenu{
position:absolute;
margin-top:-1120px;
margin-left:61px;
}

.topmenu:hover + .submenu{
position:absolute;
margin-top:20px;
margin-left:61px;
}
</style>

Problem ist nur das wenn ich vom "topmenu" den Zeiger weg ziehe verschwindet Submenu auch...

@Edit hab das irgendwie behoben alles funktioniert... aber hab jetzt ein 2 Problem.

Das der Text "HOME" über dem Submenu ist, ich meine wenn das Submenu angezeigt wird sieht man das der Text über dem Menu ist, wie kann ich das beheben ?
Vorschau

Behoben einfach bei #Menu "z-index:999" hinzugefügt ^^