Hallo Leute,

ich habe vor einiger Zeit angefangen, Websites zu schreiben.
Zunächst arbeitete ich nur mit HTML, später entdeckte ich CSS für mich.

Jetzt bastel' ich gerade an einer Website für meinen YouTube-Kanal, bei der ich eine Navigation für die Social-Media Seiten anzeigen lassen möchte, die in etwa so aussieht:

-Home
-Info
-Videos
-Kontakt
-Social
-Twitter
-Facebook
-YouTube

Das habe ich auch schon geschafft, jedoch möchte ich jetzt, dass die Untermenüs der Social-Seite nur beim Hovern dieser angezeigt werden.

Sie zu verbergen, habe ich mit dem Befehl "Position:absolute; left:-9999px;" geschafft,

nun ist meine Frage: Wie schaffe ich es, dass die Unterpunkte beim Hovern des Social-Menüpunktes angezeigt werden?

Gruß

PS.: Hier meine CSS Datei:

.menue {
list-style-type: none;
width: 210px;
margin: 0;
padding: 0;
width: 220px;
text-align: left;
}

.menue li a, .menue li a:active, .menue li a:visited {
color: #646464;
background-color: #ceccce;
width: 206px;
height: 25px;
text-decoration: none;
font-size: 10pt;
font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;
display: block;
line-height: 25px;
margin: 1px 0px 1px 0px;
padding: 2px 6px 2px 4px;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #ceccce;
border-top: 1px solid #ceccce;
border-right: 1px solid #7b7b7b;
list-style: none;

}

.menue li a:hover {
color: #FFFFFF;
background-color: #a5a5a5;
text-decoration: none;
border-bottom: 1px solid #6f6f6f;
border-left: 1px solid #b7b7b7;
border-top: 1px solid #b7b7b7;
border-right: 1px solid #6f6f6f;
font-family: "Trebuchet MS",verdana,arial,helvetica,sans-serif;

}

.menue ul {
text-decoration: none;
list-style: none;
position: absolute;
left: -9999px;
}

.menue ul:hover {
text-decoration: none;
}

.menue ul a{
text-decoration: none;
display: block;
list-style: none;
border-bottom: 1px solid #7b7b7b;
border-left: 1px solid #ceccce;
border-top: 1px solid #ceccce;
border-right: 1px solid #7b7b7b;
width: 166px;
}

Und hier die HTML-Zeilen:

<ul class="menue">

<li><a title="Home" href="index.html">&raquo; Home</a></li>
<li><a title="Info" href="info.html">&raquo; Info</a></li>
<li><a title="Videos" href="videos.html">&raquo; Videos</a></li>
<li><a title="Kontakt" href="contact.html">&raquo; Kontakt</a></li>
<li><a title="Social" href="social.html">&raquo; Social</a>
<ul>
<li><a title="Twitter" href="#">&raquo; Twitter</a></li>
<li><a title="Facebook" href="#">&raquo; Facebook</a></li>
<li><a title="Das hier ist ein Easter Egg! " href="#">&raquo; YouTube</a></li>
</ul>
</li>
</ul>

css menüs gibts wie sand am meer. einfach mal googeln...

z.B.:
100 Great CSS Menu Tutorials

Das hilft mir gar nicht.
Denkst du nicht, dass ich schon ausreichend gegoogelt hätte?
Hätte ich da was gefunden, bzw. das verstanden, hätte ich ja wohl nicht gefragt.

Ich bin noch ein ziemlicher Neuling in CSS, daher kann ich wohl verstehen, dass einige alteingesessene Coder das als ziemlich dämliche Frage sehen könnten.

Allerdings würde ich mich trotzdem darüber freuen, wenn mir jemand DIREKTE hilfe gibt, die zu meiner Frage PASST.

Danke

Nope, hast du nicht. (Oder du bist einer von tausend Menschen, die nicht richtig suchen können.

Let me google that for you
Vertical Menu by Alsacreations - CSS Portal

Ich hätte noch 1.170.000 weitere Ergebnisse.

Was verstehst du unter direkter Hilfe? Das man dir vorkaut, was du tun musst? Des weiteren: eine Information, was mit dem Menü passieren soll bei einem Hover, wäre ja auch ganz gut, aber hey, mit indirekten Fragen kann ICH was anfangen.

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Ich habe gegooglet, aber das entweder nicht verstanden oder ich habe Anleitungen gefunden mit Prinzipien, die mir nicht helfen.

Direkte Hilfe ist für mich:
Probier mal, beim .menue hover Das und das oder dieses und jenes.

"Vorkauen, was ich tun soll" wäre teilweise auch mal eine Hilfe, weil ich wie gesagt, nicht verstehe, was ich tun soll.

Würde ich nicht wollen, das mir jemand hilft oder dass die einzige Antwort: "Probier Google" ist, würde ich doch gar keine Fragen in so einem Forum stellen.

Allmählich glaube ich, ihr WOLLT mir einfach gar nicht helfen.

Ein wenig mehr Einsatz deinerseits wäre aber auch ganz gut.
Ich gebe zu dass CSS eine komplizierte nicht leicht zu verstehende Sache ist, schliesst man alle Möglichkeiten der Selektoren mit ein.

Dennoch gibt es auch Tutorials die genau erklären wie man hover auf die zweite Ebene einer Liste anwendet.

Du hast
wobei .menue auch mit der dem ersten UL gleichzusetzen ist.
Da schiebst du nun die zweite Ebene also das nachfolgende Kind UL nach mit 9999px nach links.

Jetzt must du es wenn du hover auf ein LI-Element der ersten Ebene hast mit einem Kind UL wieder an die sichbare Position holen.

Erst einmal die Position, die wäre beispielsweise 0px.
also left: 0;

Dann das hover Ereignis als Pseudoklasse auf das LI-Element angewendet:
Jetzt reagiert zwar das hover, setzt aber das erste LI-Element der ersten Ebene auf Position left:0 und das wollen wir nun ändern.
Damit auch das UL als erster Nachfahre des LI an die Position 0 fährt schreiben wir

und damit das hover auch bestehen bleibt wenn wir aus der ersten Ebene in die zweite Ebene gelangen, die ja aufgeklappt erscheint, erweitern wir unsere Regel noch ein wenig.
Ist ungestestet, sollte aber funktionieren.

__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

So etwas hab ich gesucht!
Funktioniert super, danke dir!

Kann dann geschlossen werden...wenn's sowas gibt