Hallo, folgender HTML-Code:
HTML
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<div id="dNav"> <!-- Container für Navigationsleiste -->
<nav>
<ul>
<li><a href="test1.php" class="cNav">test1</a></li>
<li><a href="test2.php" class="cNav">test2</a></li>
<li><a href="test3.php" class="cNav">test3</a></li>
</ul>
</nav>
</div>Styling-Sheet main.css
Code
/* ###### einbinden weiterer Stylesheets ######*/
@import url(navi.css); /* Styling der Navigationsleiste */
body
{
font-family: Arial;
background-image: url(../images/background.png)
}Das eigentliche Styling für die Navileiste wird in der navi.css gemacht. Bei Firefox
klappt dies alles super. Bei IE.v10 sehen die Links allerdings so aus als würde
gar kein Stylesheet existieren/aufgerufen.
Styling-Sheet: navi.css
CSS
nav {
width: 900px; /* Breite der Navileiste festlegen */
}
nav ul {
padding: 0px;
margin: 0px;
/* Box-shadow fügt den <ul> Menüs einen kleinen Schatten hinzu */
box-shadow: 2px 2px 2px #dfdfdf; /* Schatten links 2px, oben 2px, Unschärfe 2px, Farbe */
-moz-box-shadow: 2px 2px 2px #dfdfdf;
-webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul:after { /* nachfolgende Elemente nach ul (untergeodnete Listenelemente) */
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden; /* dadurch werden Listen der zweiten Ebene versteckt */
}
nav ul,nav ul li{
background-color: #FAFAFA; /* FAFAFA Hintergrundfarbe der Navigationsleiste */
}
nav ul li {
list-style: none; /* bei z.B. Style "decimal" erhalten Navi-Elemente eine Aufzählung vor dem Namen */
float:left; /* Anordnung der Navi-Elemente von links nach rechts */
border-right: 1px solid #dfdfdf;
}
nav ul li a {
text-decoration: none; /* Anzeigeart des Textes z.B. bei line-through wird Text durchgestrichen angezeigt */
display: block;
color: #333; /* Schriftfarbe des Textes der Navi-Elemente*/
padding: 10px 24px 10px 24px; /* Abstand Text nach oben, Abstand Text nach rechts, Abstand Text nach unten, Abstand Text nach links */
/* Bei Mouse hover wird per transition: background ein leichter Fade Effekt auf die Hintergrundfarbe
der Einträge gelegt. 0.3s gibt die Länge der Animation an und ease-out führt zu einem schnellen
Start der Animation, um das Menü nicht träge zu machen. Der Transition Effekt wird ausgeführt sobald
sich die entsprechende Eigenschaft ändert, in unserem Fall bei nav ul li.cat*:hover. */
transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
}
nav ul li:hover > a {
color: #FFFFFF; /* Schriftfarbe wenn man mit der Maus drüber fährt */
background-color: #808080; /* Hintergrundfarbe wenn man mit der Maus drüber fährt */
}
nav ul li:hover > ul {
visibility: visible; /* wenn Maus über Navigationselemente bewegt wird, werden nachfolgende Listenelemente wieder sichtbar eingeblendet*/
}
nav ul li ul{
display: inline;
visibility: hidden; /* bei hidden wird Größe des kompletten Listenelements (inkl. Unterlisten)) nicht angezeigt */
position: absolute;
padding:5px; /* legt äüßeren Rahmen bei Unterlisten-Elementen fest */
}
nav ul li ul li{
float: none; /* Festlegung wie Unterlistenelemente angezeigt werden. z.B. left = von links nach rechts in einer Zeile */
}
nav ul li ul li a {
color: #FAFAFA; /* legt Schriftfarbe der Unterlistenelemente fest */
}
nav ul li ul li a:hover{
color: #333; /* Schriftfarbe der Unterlistenelemente bei Auswahl des Elements per Maus */
background-color: #FAFAFA !important; /* #FAFAFA Hintergrundfarbe der Unterlistenelemente bei Auswahl des Elementes per Maus */
}