Folgender Code wird verwendet. Es ist aber eine Übung und nicht die Hommpage. Es werden nur die Listentexte übernommen. Die eingerahmten codes bewirken nicht den entsprechenden Erfolg ganz gleich welchen ich davon verwende.
<!doctype html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 10em;
background-color: #000;
color: #ff0;
padding: 1em;
border-radius: 10px;
}
nav h2 {
padding-top: 5px;
padding-bottom: 2px;
border-bottom: solid 2px white;
margin-bottom: 5px;
}
nav ul {
list-style: none;
padding: 0;
margin-left: 3px;
}
/*****************************/
nav > ul > li:nth-last-child(15) { /* soll das letzte Element der ersten Ebene beginnend von unten rot färben*/
color: red;
}
nav > ul > li:nth-child(1) { /* soll das erste Element der ersten Ebene rot färben */
color: red;
}
/*****************************/
nav > ul > li:nth-last-child(1) { /* erzeugt einen Abstand vor dem letzten Element*/
margin-top: 15px;
}
nav ul ul {
padding-left: 1em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<nav>
<h2>Inhalt</h2>
<ul>
<li>Allgemeines
<ul>
<li>Abkürzungen</li>
<li>Gewürzkunde</li>
</ul></li>
<li>Beilagen</li>
<li>Gebäck</li>
<li>Getränke</li>
<li>Suppen</li>
<li>Fleischspeisen</li>
<li>Mehlspeisen</li>
<li>Süßspeisen</li>
<li>Eisrezepte</li>
<li>Kuchen</li>
<li>Torten</li>
<li>Puddings</li>
<li>Marmeladen</li>
<li>Weihnachtsbäckerei</li>
<li>Zum Hauptmenü</li>
</ul>
</nav>
</body>
</html>
--
LG Franz
LG Franz