1. Zwiększamy obszar strony do 1200px, wprowadzamy kolumnę MENU o 180px szerokości reszta wg wzoru:
![]()
2. Dodajemy elementy menu wg wzoru:
3. Dodajemy czcionkę z Google Fonts.
4. Formatujemy menu:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
5. Formatujemy odnośnik:
li a { display: block; color: white; text-align: left; padding: 10px; text-decoration: none; background-color: #ddd; }
6. Formatujemy zachowanie odnośników po najechaniu kursorem i zaznaczeniu, np.:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}