• Hallo Gast, du kaufst gerne günstig ein und erfährst oft vor deinen Freunden von interessanten Angeboten? Dann kannst du dein Talent als Schnäppchenjäger jetzt zu Geld machen und anderen PCGH-Lesern beim Sparen helfen! Schau einfach mal rein - beim Test der Community Deals!

Problem mit Dropdown Menu, fehlt 1 schritt.

MyComputerTIPS

Gesperrt
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.

Code:
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>

Code:
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.
Code:
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.
 
A

Ap0ll0XT

Guest
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. ;)
 
TE
MyComputerTIPS

MyComputerTIPS

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

Code:
<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 ^^
 
Zuletzt bearbeitet:
Oben Unten