1. Kopieer onderstaande code en plak het in je bestaande stylesheet of maak een nieuwe aan en pas het aan naar jouw eigen wensen. In de code staan een aantal comment om je een beetje op weg te helpen.

.menu {
list-style:none;
padding:0;
margin:0;
}
.menu li{
font-size: 12px;
list-style:none; /* Zodat er geen standaard bullet wordt weergegeven */
padding: 0 0 5px 0px; /* De padding is de ruimte tussen iedere nieuwe <li>. Het eerste getal is de top en vanaf daar ga je met de wijzers van de klok mee, dus top, rechts, bottom, links.*/
margin: 0px;}
.menu li a{
color: #000000;
font-size: 12px;
border: 1px solid #B9AC97;
background-color:#EEEBE6;
padding: 3px; /* De ruimte tussen tekst en buitenkant van de achtergrond(kleur) */
margin: 0 0 0 4px;
display:block;}
.menu li a:visited{
color: #a28877;
text-decoration: none;
}
.menu li a:hover{
text-decoration: none;
display: block;
background-color:#B9AC97;
border: 1px solid #7A6B52;
color:#f5f6dd;
}

2. Plak onderstaande code in je (X)HTML document op de plek waar jij je menu wilt weergeven.

<ul class=”menu”><li>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
<a href=”jouwlinkhier“>Link</a>
</li></ul>