z-index messes up code

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>
 

Code (markup):

<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>

HTML:

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