Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 31.12.2013, 23:14
12morefacts 12morefacts ist offline
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