z-index messes up code

[progfrog]

hello all. the next code's supposed to be working but i understand the z-index messes the hide/show function. i've bombarded "z-inedx:1;" everywhere but it only worked previously, when my menu only handled one submenu. anyway nuff said;


menushow=0;
menu2show=0;
menu3show=0;


function one(){
var ul = window.document.getElementById("sub1")
var subul = window.document.getElementById("sub2")
var subsubul = window.document.getElementById("sub3")

if(menushow ==1){
ul.className = "littlemenu";
}
if(menushow ==0){
ul.className = "disappear";
}

if(menu2show ==1){
subul.className = "littlemenu";
}

if(menu2show ==0){
subul.className = "disappear";
}

if(menu3show ==1){
subsubul.className = "littlemenu";
}
if(menu3show ==0){
subsubul.className = "disappear";
}


}

function reveal(){
menushow=1;
one()
}

function conceal(){
menushow=0;
window.setTimeout("one()", 100);
}

function reveal2(){
menu2show=1;
one()
}

function conceal2(){
menu2show=0;
window.setTimeout("one()", 100);
}

function reveal3(){
menu3show=0;
one()
}


function conceal3(){
menu3show=0;
window.setTimeout("one()", 100);
}




</script>



<div id="wrapper" style="left: 83px; width: 907px; top: -54px; height: 610px">
<div id="header"><img src="images/para.jpg" alt="paradise" style="width: 100%; height: 175px" /></div>
<div class="drop1"></div>
<div id="menu" style="left: -39px; width: 196px; top: 29%; height: 21%; z-index:1;">
<ul>
<li class="color">תפריט</li>
<li onmouseover="reveal()" onmouseout="conceal()">פריט</li>
<li onmouseover="reveal2" onmouseout="conceal2()">פריט</li>
<li onmouseover="reveal3" onmouseout="conceal3()">פריט</li>
<li class="color"></li>
</ul>
</div>

<div id ="submenu" class="submenu" style="left: 529px; top: 196px; z-index:1; height: 44%;">
<ul class="disappear" id="sub1" style="left: 449px; width: 177px; top: 248px; z-index:1; height: 106px" onmouseover="reveal()" onmouseout="conceal()">
<li class="color"></li>
<li><a href="" id="bog">פריט</a></li>
<li>פריט</li>
<li>פריט</li>
<li class="color"></li>
</ul>
</div>

<div class="submenu" id="submenu2" style="left: 452px; z-index:1; top: 206px; width: 233px; height: 57%;">
<ul class="disappear" id="sub2" onmouseover="reveal2" onmouseout="conceal2" style="left: 400px; z-index:1; width: 177px; top: 248px; height: 75px">
<li class="color"></li>
<li><a href="" class="littleitem">פריט</a></li>
<li>פריט</li>
<li>פריט</li>
<li class="color"></li>
</ul>
</div>

<div class="submenu" id ="submenu3" style="left: 526px; top: 243px; z-index:1;">
<ul class="disappear" id="sub3" onmouseover="reveal3()" onmouseout="conceal3()" style="left: 449px; width: 177px; top: 248px; height: 75px; z-index:1;">
<li class="color"></li>
<li><a href="" class="littleitem">פריט</a></li>
<li>פריט</li>
<li>פריט</li>
<li class="color"></li>
</ul>
</div>





i thank anyone who took the time to try and help.