Olá....boa tarde !!

Crei um menu multi-level simples em CSS:
 
MENU_MOLDE

, gostaria agora que, para:

@media screen and (max-width: 900px)

o menu se torne responsável, com ul li a {float: none; text-align: left; width: 100%} e ativar o submenu ao clicá-lo e desativar ao clica-lo novamente!!

Alguém poderia me ajudar ??
Desde já muito obrigado !!

Olá pessoal !!
Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
 
@media screen and (max-width: 800px) {
}
 
O link do menu de como está atual se encontra em:
MENU Link

e o que eu desejo alcançar é:
MENU RESPONSIVE

Por favor me ajudem.....abraço !!

Pessoal bom dia, peço desculpas se já existe um post referente a esse problema, caso haja me informe por gentileza  se não...
 
Estou concluindo o desenvolvimento de um site responsive, então resolvi atualizar meus navegadores, quando entro no site fica meio desorganizado o menu superior entre outras informações, então eu retiro o zoom da página para 90% e o site fica tudo ok, gostaria de saber se alguém esta passando por isso e como resolver, ou errei em alguma coisa referente ao meu código. ficarei grato e obrigado.

Preciso passar esse código do formulario de contato para responsivo. Preciso usar ele, pois já está configurado com conexão com o banco de dados.
 
Me desculpem pela ignorância, estou adicionando esse código em um campo html nessa página wordpress e o que sei sobre programação é o básico do básico como mudar cor, fonte e imagem responsiva e algo mais.
 
página:
http://www.mundoagua.com.br/banheiras/spa-3-pessoas/
 
 
Código:
<h2 id="orcamento">Solicite um orçamento</h2>
<form id="contact-mail-page" 
action="http://www.mundoagua.com.br/enviar.php" 
method="post" accept-charset="UTF-8">
<div id="contato-titulo">
  <p class="vermelho"><strong>(* Preenchimento 
obrigatório )<br />
  </strong></p>
  <table id="bgtabela" width="478" border="0" 
cellspacing="0" cellpadding="0">
<tbody>

<tr>
<td width="77"><span class="style4">*Nome:</span></td>
<td width="436"><br />
  <input type="text" name="nome" size="65" 
maxlength="80" />
    <br />
    <br /></td>
</tr>
<tr>
<td>
<p class="style4">*E-mail:</p></td>
<td><input type="text" name="email" size="65" 
maxlength="50" /></td>
</tr>
<tr>
  <td><span class="style4">*DDD:</span></td>
  <td><br />
    <input type="text" name="ddd" size="3" maxlength="2" 
id="ddd" />
    <br />
    <br /></td>
</tr>
<tr>
<td>
<p class="style4">*Telefone:</p></td>
<td><input type="text" name="telefone" size="20" 
maxlength="10" /></td>
</tr>
<tr>
<td>
<p class="style4">Sexo:</p></td>
<td><select name="sexo"> <option selected="selected" 
value="M">Masculino</option> <option 
value="F">Feminino</option> </select></td>
</tr>
<tr>
<td>
<p class="style4">*Cidade:</p></td>
<td><input type="text" name="cidade" size="65" 
maxlength="50" /></td>
</tr>
<tr>
<td>
<p class="style4">Estado:</p></td>
<td><select name="estado"> <option 
selected="selected">AC</option> <option>AL</option> 
<option>AM</option> <option>AP</option> 
<option>BA</option> <option>CE</option> 
<option>DF</option> <option>ES</option> 
<option>GO</option> <option>MA</option> 
<option>MG</option> <option>MS</option> 
<option>MT</option> <option>PA</option> 
<option>PB</option> <option>PE</option> 
<option>PI</option> <option>PR</option> 
<option>RJ</option> <option>RN</option> 
<option>RO</option> <option>RR</option> 
<option>RS</option> <option>SC</option> 
<option>SP</option> <option>SE</option> 
<option>TO</option> </select></td>
</tr>
<tr>
<td>
<p class="style4">Mensagem:</p></td>
<td><textarea name="comentarios" rows="4" 
cols="60"></textarea></td>
</tr>
<tr>
<td></td>
<td><input onclick="javascript:valida_cadastro(); return 
false" type="submit" name="EnviarBt" value="Enviar" /> 
<input type="reset" name="Reset" value="Limpar" /></td>
</tr>
</tbody>
</table>
 
 

Gostaria de saber se as três resoluções que estou usando no media querie é suficiente:
 
/** Smarthphones no formato "retrato" **/
@media screen and (max-width: 479px) and (orientation:landscape){
 
  }
/** Tablets e Smarthphones de segunda geração **/
@media screen and (min-width: 480px) and (max-width: 767px){
   
  }
/** Desktops, Laptops e TVs. **/
@media screen and (min-width: 768px){
  
  }