Een crossbrowser navigatie maken is eigenlijk niet zo moeilijk als je maar rekening houd met de verschillen die er zijn. Om de gehele blok te kunnen gebruiken voor de links is de breedte op auto voor de betere browsers, terwijl voor IE6 de breedte op 100% moet worden gezet om alles naar behoren te laten werken.

HTML

<div id="navigatie">
<ul>
<li><a href="#">CSS3</a></li>
<li><a href="#">Nascom</a></li>
<li><a href="#">Gigadesign</a></li>
<li><a href="#">TopStyle</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Ultra Edit</a></li>
<li><a href="#">Rechts</a></li>
</ul>
</div>

CSS

#navigatie {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #F93;
color: #333;
}
#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigatie li {
border-bottom: 1px solid #F93;
margin: 0;
}
#navigatie li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #C66300;
border-right: 10px solid #FF870F;
background-color: #EC7600;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navigatie li a {
width: auto;
}
#navigatie li a:hover {
border-left: 10px solid #E17100;
border-right: 10px solid #FFB66C;
background-color: #FF962D;
}