Mooi pop-up menu!

<!-- hier kun je het uitzicht van de popups wijzigen -->
<style>
.popup{
position:absolute;
width:100px;
background-color:yellow;
border:2px solid brown;
font:normal 12px Arial;
line-height:18px;
z-index:10;
visibility:hidden;
}

.popup a{
text-decoration:none;
color:brown;
font-weight:bold;
padding-left:5px;
padding-right:5px;
}

#muisover{
background-color:gold;
}

#muisover a{
color:red;
}
</style>

<script language="JavaScript1.2">
// hier maak je de menu-items aan
var menu=new Array()

menu[0]='<div class="popitem"><a href="#">Subitem 1.1</a></div>'
menu[0]+='<div class="popitem"><a href="#">Subitem 1.2</a></div>'
menu[0]+='<div class="popitem"><a href="#">Subitem 1.3</a></div>'

menu[1]='<div class="popitem"><a href="#">Subitem 2.1</a></div>'
menu[1]+='<div class="popitem"><a href="#">Subitem 2.2</a></div>'
menu[1]+='<div class="popitem"><a href="#">Subitem 2.3</a></div>'

menu[2]='<div class="popitem"><a href="#">Subitem 3.1</a></div>'
menu[2]+='<div class="popitem"><a href="#">Subitem 3.2</a></div>'
menu[2]+='<div class="popitem"><a href="#">Subitem 3.3</a></div>'

menu[3]='<div class="popitem"><a href="#">Subitem 4.1</a></div>'
menu[3]+='<div class="popitem"><a href="#">Subitem 4.2</a></div>'
menu[3]+='<div class="popitem"><a href="#">Subitem 4.3</a></div>'

menu[4]='<div class="popitem"><a href="#">Subitem 5.1</a></div>'
menu[4]+='<div class="popitem"><a href="#">Subitem 5.2</a></div>'
menu[4]+='<div class="popitem"><a href="#">Subitem 5.3</a></div>'

// hieronder niets wijzigen

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers
function toonmenu(e,nr){
if (!document.all&&!document.getElementById&&!document.layers)
return reset()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.stijl=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=nr
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="reset()" onmouseout="hidemenu()">'+nr+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y
var rechts=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var onder=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
if (rechts<menuobj.contentwidth)
menuobj.stijl.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else menuobj.stijl.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX
if (onder<menuobj.contentheight)
menuobj.stijl.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else menuobj.stijl.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.stijl.visibility="visible"
return false}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;}
function hidemenu(){
if (window.menuobj)
menuobj.stijl.visibility=(ie4||ns6)? "hidden" : "hide"}
function stop(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()}
function verbergmenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)}
function reset(){
if (window.delayhide)
clearTimeout(delayhide)}
function hilite(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="popitem"){
source_el.id=(state=="aan")? "muisover" : ""}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="popitem"){
source_el.id=(state=="aan")? "muisover" : ""}}}}
if (ie4||ns6)
document.onclick=hidemenu
</script>

<!-- hier kun je het uitzicht van de popups wijzigen -->
<style>
.popup{
position:absolute;
width:100px;
background-color:yellow;
border:2px solid brown;
font:normal 12px Arial;
line-height:18px;
z-index:10;
visibility:hidden;
}
 
.popup a{
text-decoration:none;
color:brown;
font-weight:bold;
padding-left:5px;
padding-right:5px;
}
 
#muisover{
background-color:gold;
}
 
#muisover a{
color:red;
}
</style>
 
<script language="JavaScript1.2">
// hier maak je de menu-items aan
var menu=new Array()
 
menu[0]='<div class="popitem"><a href="#">Subitem 1.1</a></div>'
menu[0]+='<div class="popitem"><a href="#">Subitem 1.2</a></div>'
menu[0]+='<div class="popitem"><a href="#">Subitem 1.3</a></div>'
 
menu[1]='<div class="popitem"><a href="#">Subitem 2.1</a></div>'
menu[1]+='<div class="popitem"><a href="#">Subitem 2.2</a></div>'
menu[1]+='<div class="popitem"><a href="#">Subitem 2.3</a></div>'
 
menu[2]='<div class="popitem"><a href="#">Subitem 3.1</a></div>'
menu[2]+='<div class="popitem"><a href="#">Subitem 3.2</a></div>'
menu[2]+='<div class="popitem"><a href="#">Subitem 3.3</a></div>'
 
menu[3]='<div class="popitem"><a href="#">Subitem 4.1</a></div>'
menu[3]+='<div class="popitem"><a href="#">Subitem 4.2</a></div>'
menu[3]+='<div class="popitem"><a href="#">Subitem 4.3</a></div>'
 
menu[4]='<div class="popitem"><a href="#">Subitem 5.1</a></div>'
menu[4]+='<div class="popitem"><a href="#">Subitem 5.2</a></div>'
menu[4]+='<div class="popitem"><a href="#">Subitem 5.3</a></div>'
 
// hieronder niets wijzigen
 
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers
function toonmenu(e,nr){
if (!document.all&&!document.getElementById&&!document.layers)
return reset()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.stijl=(ie4||ns6)? menuobj.style : menuobj
if (ie4||ns6)
menuobj.innerHTML=nr
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="reset()" onmouseout="hidemenu()">'+nr+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y
var rechts=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var onder=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
if (rechts<menuobj.contentwidth)
menuobj.stijl.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else menuobj.stijl.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX
if (onder<menuobj.contentheight)
menuobj.stijl.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else menuobj.stijl.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.stijl.visibility="visible"
return false}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;}
function hidemenu(){
if (window.menuobj)
menuobj.stijl.visibility=(ie4||ns6)? "hidden" : "hide"}
function stop(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()}
function verbergmenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)}
function reset(){
if (window.delayhide)
clearTimeout(delayhide)}
function hilite(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="popitem"){
source_el.id=(state=="aan")? "muisover" : ""}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="popitem"){
source_el.id=(state=="aan")? "muisover" : ""}}}}
if (ie4||ns6)
document.onclick=hidemenu
</script>

<div id="popmenu" class="popup" onMouseover="reset();hilite(event,'aan')" onMouseout="hilite(event,'uit');stop(event)">
</div>
<center>
<a href="#" onMouseover="toonmenu(event,menu[0])" onMouseout="verbergmenu()">Hoofditem 1</a>     
<a href="#" onMouseover="toonmenu(event,menu[1])" onMouseout="verbergmenu()">Hoofditem 2</a>     
<a href="#" onMouseover="toonmenu(event,menu[2])" onMouseout="verbergmenu()">Hoofditem 3</a>     
<a href="#" onMouseover="toonmenu(event,menu[3])" onMouseout="verbergmenu()">Hoofditem 4</a>     
<a href="#" onMouseover="toonmenu(event,menu[4])" onMouseout="verbergmenu()">Hoofditem 5</a>     
</center>

<div id="popmenu" class="popup" onMouseover="reset();hilite(event,'aan')" onMouseout="hilite(event,'uit');stop(event)">
</div>
<center>
<a href="#" onMouseover="toonmenu(event,menu[0])" onMouseout="verbergmenu()">Hoofditem 1</a>     
<a href="#" onMouseover="toonmenu(event,menu[1])" onMouseout="verbergmenu()">Hoofditem 2</a>     
<a href="#" onMouseover="toonmenu(event,menu[2])" onMouseout="verbergmenu()">Hoofditem 3</a>     
<a href="#" onMouseover="toonmenu(event,menu[3])" onMouseout="verbergmenu()">Hoofditem 4</a>     
<a href="#" onMouseover="toonmenu(event,menu[4])" onMouseout="verbergmenu()">Hoofditem 5</a>     
</center>