¿Cómo conseguir cambiar el z-index de una fila dentro de una tabla?

Hola a todos, mi problema es el siguiente, a ver si alguien da con la tecla.
Tengo una tabla con 4 filas y 1 columna. En la primera fila tengo un menú desplegable. En las otras filas tengo textbox, select, img, ...
El problema está en que cuando despliego el menú, los diferentes submenús aparecen por debajo de los elementos de las otras filas.
¿Cómo puedo hacer para que aparezca el menú por encima?
He probado asignando a la primera fila un z-index más alto que a las otras, pero no hace caso.

Alguna idea?

Muchas gracias

Porque una tabla???

Hola, perdona por la explicación. En la primera fila de la tabla está el menú, dicho menú está hecho con css y usando <ul> y <li>

Claro, pero porque estas usando una tabla y no un div o un nav para el menú?

Hola, os dejo el código que uso, a ver si veis algo que pueda solucionar el problema:

Código HTML :

<table>
   <tr>
      <td>
         <div>
            <ul>
               <li><a id="a1" href="#"><span id="ctl00_headerControl_lblHome">Home</span></a></li>
               <li><a id="a2" href="#"><span id="ctl00_headerControl_lblProducts">Products</span></a>
                  <ul style="visibility: hidden;">
                     <li><a href=""><span id="ctl00_headerControl_P1">P1</span></a></li>
                     <li><a href=""><span id="ctl00_headerControl_P2">P2</span></a></li>
                     <li><a href=""><span id="ctl00_headerControl_P3">P3</span></a></li>
                     <li><a href=""><span id="ctl00_headerControl_P4">P4</span></a></li>
                  </ul>
               </li>
               <li><a id="a3" href="#"><span id="ctl00_headerControl_lblServices">Services</span></a>
                  <ul>
                     <li><a href="#"><span id="ctl00_headerControl_S1">S1</span></a></li>
                     <li><a href="#"><span id="ctl00_headerControl_S2">S2</span></a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </td>
   </tr>
   <tr>
      <td>
         <span id="ctl00_cntMainContent_lblName" style="position:relative; margin-top:11px;">* Name</span>
         <br />
         <input type="text" maxlength="20" id="ctl00_cntMainContent_txtName" style="width:175px;position:relative;margin-top:0px;" />
         <select id="ctl00_cntMainContent_ddlSector" style="width:175px;position:relative; margin-top:0px; margin-left:20px">
            <option value="1">Sector1</option>
            <option value="2">Sector2</option>
            <option value="3">Sector3</option>
            <option value="4">Sector4</option>
         </select>
         <br />
         <span id="ctl00_cntMainContent_lblSurname" style="position:relative; margin-top:11px;">Surname</span>
         <br />
         <input type="text" maxlength="50" id="ctl00_cntMainContent_txtSurname" style="width:175px;position:relative; margin-top:0px;" />
         <select id="ctl00_cntMainContent_ddlEmployees" style="width:175px;position:relative; margin-top:0px; margin-left:20px">
            <option value="0">Employees</option>
            <option value="1">1 to 10</option>
            <option value="2">10  to 100</option>
            <option value="3">100 to 500</option>
            <option value="4">500 to 1000</option>
         </select>
      </td>
   </tr>
</table>

Cómo os he dicho, los submenús se me muestran por debajo de los selects de la segunda fila.
Alguna idea?

Muchas gracias

Palacio ajusta la propiedad valign de tu tabla, pero de una vez ve considerando quitar esa enorme tabla de ahí que para eso existen div, section, nav y otras.

Una tabla es para mostrar datos de forma tabulada, NO para lograr un diseño...

Saludos!