Soon you need to stay on top of the menu but menu is not clickable

When I mouse over the menu the 'onMouseOver' property is not active because the logo needs to be in front, how can I solve it? The menu with property 'onMouseOver' dims size as well. grateful if anyone can help.

Farra Certa

body {
    border: 0px;
}

div#header {
    background-image:url(../../../Documents/Sites/SiteFarraCerta/images/backgroundheader.jpg);
    background-repeat:repeat-x;
    height: 1500px;
    width: 1280px;
    position:absolute;
    top: 0px;
    left: 50%;
    margin-left: -640px;
}

img#logo {
height: 254px;
width: 373px;
position: absolute;
left: 50%;
margin-left: -186px;
z-index: 3;
}

img#box {
    height: 43px;
    width: 129px;
    position:absolute;
    top: 140px; 
    left: 50%;
    margin-left: -87px;
    display:block;
    z-index: 1;
}

img#servicosbox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 682px;
    display:block;
    z-index: 1;
    }

img#agendabox {
height: 43px;
width: 129px;
position: absolute;
top: 140px;
left: 424px;
display: block;
z-index: 1;
    }

img#contatobox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 811px;
    display:block;
    z-index: 1;
    }

img#homebox {
    height: 43px;
    width: 129px;
    position: absolute;
    top: 140px;
    left: 295px;
    display:block;
    z-index: 1;
    }