Menu goed in beeld krijgen

<!-- START OF SCRIPT -->
<style type="text/css">



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

#csstopmenu li{
float: left;
position: relative;
	z-index: auto;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: ;
border-left-width: 0;
background-color: FF3300;
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: 0033FF;
border: 1px solid black;
	table-layout: fixed;
	font: Verdana;
	font-color: ff3300;
	font-size: small;
	font-style: normal;
	
}

.submenus li{
width: 100%;
font-color: Black;

}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: FF3300;
color: FF3300;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){                  
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>
<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Home</a></div>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Huisregels</a></div>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.bsvdematen.nl">Wie zijn wij</a></div>
<ul class="submenus">
<li><a href="wie.php">Het bestuur</a></li>
<li><a href="straatcoor.php">Straatcoordinatoren</a></li>
<li><a href="webma.php">Webmaster</a></li>
</ul>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Foto Album</a></div>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Kalender</a></div>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.bsvdematen.nl">Gastenboek</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Lees</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Schrijf</a></li>
</ul>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Vacatures</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Beheerder</a></li>
<li><a href="http://javascriptkit.com/">Sleutelbeheerder</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">penningmeester</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">Voorzitter</a></li>
</ul>
</li>

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">Links</a></div>

</li>
<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.bsvdematen.nl">Contact</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Algemeen</a></li>
<li><a href="http://javascriptkit.com/">Voorzitter</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">penningmeester</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">Secretaris</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">Webmaster</a></li>
</ul>
</li>



<div id="clearmenu" style="clear: left"></div>

<!-- END OF SCRIPT -->