Hallo,
Ich bin dabei mein Haupt-Layout für meine Seite zu entwickeln. die navnar macht mir dabei immer Probleme.
Die Seite baut auf CSS3 und HTML5 auf, sollte aber dasselbe Prinzip sein, wie früher.
index.html
[/CODE]
nav.css
Ich bin dabei mein Haupt-Layout für meine Seite zu entwickeln. die navnar macht mir dabei immer Probleme.
Die Seite baut auf CSS3 und HTML5 auf, sollte aber dasselbe Prinzip sein, wie früher.
index.html
HTML:
<!DOCTYPE html>
<html>
<body>
<header>
</header>
<section>
<nav>
<ul>
<li><a href="#">Home></li>
<li><a href="#">Home></li>
<li><a href="#">Sub-Link>
<ul><li><a href="#">Sub-1</li></ul>
</li>
<li><a href="#">Weiteres></li>
</ul>
</nav>
</section>
</body>
</html>[/CODE]
nav.css
Code:
nav ul { margin: 0; /* Außenabstand zur Section */
padding: 12px; /* Höhe der Leiste */
text-align: center; /* Zentrierung der "buttons" */
border: 1px solid black; /* Umrandung */
background: #3F784D;
}
nav ul li {
display: inline; /* In einer Linie darstellen */
list-style: none; /* Keine Listen Punkte */
position: relative; /* Wird für Subs benötigt */
margin: 0; /* Außenabstand von li - Abstand zwischen einzelnen Lis */
padding: 8px; /* Fläche von li */
}
nav ul li a {
padding: 13px; /* Fläche von a */
text-decoration: none; /* Keine Link-Unterstreichung */
color: black; /* Farbe der Schrift */
}
nav ul li ul {
display: none; /* Ausblenden */
margin: 0;
padding: 0;
width: 200px; /* Breite des Sub menues */
position: absolute; /* Erscheint unter nav ul li */
top: 60px; /* Abstand zu nav ul li */
left: 0px; /* Position links-rechts verrücken */
text-align: left; /* Text liks centrieren */
border: solid 1px #B4B4B4;
background: #DDD;
}
nav ul li ul li {
float: none;
margin: 0;
padding: 0;
}
nav ul li ul li a {
padding: 12px;
}
nav .current a, nav ul li:hover > a {
color: #66C45C; /* Gelbliche Text Farbe */
background: #1E563D;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul li:hover a, nav ul li ul li:hover li a {
background: none;
color: #666
}
nav ul li ul li a:hover {
background: #0399d4 !important;
color: #FFF !important;
}
Zuletzt bearbeitet:
