Rollover menu code

Lees hier meer over het rollover menu >

<!– Dit gedeelte komt in je stijlblad of in je stijl in de header te staan –>
#navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}

#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigatie ul li {
margin: 0;
border-top: 1px solid #003;
}

#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navigatie ul li a {
width: auto;
}

#navigatie ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
<!– Dit komt in de body te staan en is de linklijst zelf –>
<div id=”navigatie”>
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/”>Over ons</a></li>
<li><a href=”/”>Archief</a></li>
<li><a href=”/”>Forum</a></li>
<li><a href=”/”>Winkel</a></li>
<li><a href=”/”>Contact</a></li>
</ul>
</div>

html en css voor beginnersWil jij ook leren hoe je je eigen website kunt maken?

Wil jij tips en tricks om zo goed mogelijk zelf met alles aan de slag te kunnen?
Meld je hieronder aan voor de HTML-site nieuwsbrief en krijg elke week handige tips om een website te bouwen.
En je ontvangt meteen mijn GRATIS ebook HTML & CSS voor Beginners.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.