zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Navigation funktioniert nicht richtig :( Hilfe!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.12.2013, 22:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.12.2013
Beiträge: 4
12morefacts befindet sich auf einem aufstrebenden Ast
Standard CSS Navigation funktioniert nicht richtig :( Hilfe!

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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.01.2014, 12:52
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

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

z.B.:
100 Great CSS Menu Tutorials
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.01.2014, 12:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.12.2013
Beiträge: 4
12morefacts befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von leex279 Beitrag anzeigen
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
Mit Zitat antworten
  #4 (permalink)  
Alt 05.01.2014, 13:31
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.378
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von 12morefacts Beitrag anzeigen
Denkst du nicht, dass ich schon ausreichend gegoogelt hätte?
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.

Zitat:
Zitat von 12morefacts Beitrag anzeigen
Allerdings würde ich mich trotzdem darüber freuen, wenn mir jemand DIREKTE hilfe gibt, die zu meiner Frage PASST.
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?
Mit Zitat antworten
  #5 (permalink)  
Alt 05.01.2014, 13:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.12.2013
Beiträge: 4
12morefacts befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.01.2014, 14:57
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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
HTML-Code:
.menue ul {
text-decoration: none;
list-style: none;
position: absolute;
left: -9999px;
}
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:
HTML-Code:
.menue li:hover {
     left: 0;
}
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

HTML-Code:
.menue li:hover ul{
     left: 0;
}
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.
HTML-Code:
.menue li:hover ul, .menue li:hover ul:hover{
     left: 0;
}
Ist ungestestet, sollte aber funktionieren.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.01.2014, 17:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.12.2013
Beiträge: 4
12morefacts befindet sich auf einem aufstrebenden Ast
Standard

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

Kann dann geschlossen werden...wenn's sowas gibt
Mit Zitat antworten
Antwort

Stichwörter
anzeigen, css, hovern, html, menü, navigation, verbergen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit FlyOut Menu im IE7 quarki69 CSS 5 15.03.2010 15:46
Hilfe bei CSS Desing Umsetzung. Frosti1986 CSS 7 27.02.2010 13:08
Lightbox mit zweiter CSS Datei funktioniert nicht T4ke CSS 12 11.12.2007 19:20
CSS Navigation mit "umschlossener" Grafik name CSS 6 24.09.2007 22:33
CSS Tips & Tricks Webnauts Ressourcen 0 25.08.2006 23:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:52 Uhr.