menu nell'head tendina del sottomenu va a finire sotto al content

[w.ve]

ciao,
ho un sito gestito così:
ho varie pagine collegate tra loro ossia head, foot, ed al centro un content, il tutto collegato al wrapper e gestito con i CSS.

nella pagina head ossia l'intestazione del sito ho inserito un menu orizzontale a tendina.

il mio problema è che il sottomenu ossia la tendina mi va a finire sotto il content o il wrapper, io vorrei visualizzarla in primo piano, sopra ogni cosa.

contenitore dell'head:

<div id="wrapperhead">

tabella del menu nell'head:

<table class="tabmenu" id="MJ_MainMenu" cellpadding="0px" cellspacing="1px"> 
<tr>
 
<td nowrap="nowrap" class="MJ_MainMenu" onMouseOver="MJ_OpenMenu(1)" onMouseOut="MJ_CloseMenu(1)"> 
<a href="index.asp" class="MJ_VoiceClass">HOME
</a> 
</td> 

<td nowrap="nowrap" class="MJ_MainMenu" onMouseOver="MJ_OpenMenu(2)" onMouseOut="MJ_CloseMenu(2)"> 
<a href="javascript:void(0)" class="MJ_VoiceClass">
SOFTWARE
</a> 



<div id="MJ_2" class="MJ_HiddenLink"> 
<a href="prodotti.asp" class="MJ_LinkClass">
PRODOTTI PASSEPARTOUT
</a> 
<a href="personalizzazioni.asp" class="MJ_LinkClass">
PERSONALIZZAZIONI MEXAL
</a> 
<a href="software_personalizzati.asp" class="MJ_LinkClass">
SOFTWARE PERSONALIZZATI
</a>
 <a href="siti_web.asp" class="MJ_LinkClass">
SITI WEB
</a> 
<a href="in_lavorazione.asp" class="MJ_LinkClass">
IN LAVORAZIONE
</a> 
</div> 
</td> 
ecc........

nel CSS:

menu:

/* MENU ORIZZONTALE*/
 #MJ_MainMenu { 
border-top: solid 1px #999999; 
border-bottom:solid 1px #999999; 
margin-top:80px; 
position:relative; 
padding-bottom:3px;
 } 

td.MJ_MainMenu { 
vertical-align: top; 
width:20%; 
} 

div.MJ_HiddenLink { 
visibility: hidden; 
position: absolute;
 } 

div.MJ_VisibleLink { 
visibility: visible; 
position: absolute; 
width: auto; 
margin: 0px 0px 0px -1px; 
border-top: solid 0px #000000; 
border-left: solid 0px #000000; 
border-right: solid 0px #000000;
 } 

a.MJ_VoiceClass, a.MJ_VoiceClass:hover { 
display: block; 
position: relative; 
font-weight: bold; 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
padding-left:10px; 
padding-top:5px; 
padding-bottom:5px; 
padding-right:10px;
 } 

a.MJ_VoiceClass { 
color: white;
 }

 a.MJ_VoiceClass:hover { 
color: #2A1F55;
 } 

a.MJ_LinkClass, a.MJ_LinkClass:hover { 
display: block; 
position: absolute; 
color: #2A1F55; 
font-family: Arial;
 text-decoration: none;
 padding: 0px 0px 5px 5px;
 border-bottom: solid 0px #000000;
 text-align:left;
 } 

a.MJ_LinkClass { 
background-image:url(../img/sfsottomenu.png); 
background-repeat:repeat-x; color:#FFFFFF; 
font-family: Arial; 
margin-top:2px;
 } 

a.MJ_LinkClass:hover { 
background-image:url(../img/sfsottomenu.png);
 background-repeat:repeat-x;
 background-color: #CCFFFF; 
color: #2A1F55; 
font-family: Arial;
 margin-top:2px; 
} 

.tabmenu {
 background-image:url(../img/sfondotitle2.png); 
background-repeat:no-repeat;
 background-position:center;
 background-color:transparent; 
width:100%; 
color: #551F00; 
font-family:Arial; 
font-size:12px; 
}

il content:

#content { 
background-color:#FFFFFF; 
height:auto !important;
 min-height:640px;
 width:100%; 
border-left:1px solid #CCCCCC; 
border-right:1px solid #CCCCCC; 
position: inherit;
 text-align:left; 
margin-top:0px;
 margin-left:0px;
 padding-left:4px; 
padding-right:4px; 
padding-top:8px;
 border-top:0px solid #CCCCCC;
 }

i wrapper dell'head e dell'intera pagina:

#wrapperhead { 
width:101%; 
height:130px;
 background-image:url(../img/sfondohead.png); 
background-repeat:repeat-x; 
background-position:bottom;
 border-top:0px solid #CCCCCC;
 border-left:1px solid #CCCCCC;
 border-right:1px solid #CCCCCC;
 border-bottom:1px solid #cccccc;
 margin-bottom:0px; margin-left:0px;
 margin-top:0px; 
}

 #wrapper {
 width: 100%; 
min-width:647px; 
max-width:860px;
 background-image:url(../img/trasparente.gif);
 background-repeat:repeat-x;
 margin:0 auto;
 border-right:0px solid #CCCCCC; 
}

[MEURI]

Hai già provato ad utilizzare il tag z-index sul tuo menu?

[w.ve]

non ci avevo pensato!
grazie!