Rollover menu code

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>

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *