[JQ] menù con tendina a scomparsa

[il mandorlone]

volevo creare un classico menu con una tendina a scomparsa
vorrei che venisse visualizzata solo 1 tendina al massimo.
il codice che ho fatto:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>    <script type="text/javascript">
      $(document).ready(function(){
        $('.menu').next('.tendina').hide();
        $('.menu').click(function(){
            $('.menu').next('.tendina').hide("slow");
            $(this).next('.tendina').toggle("slow");
        });
      });
    </script>
    <div>
      <p>
        <span class="menu">menu 1</span>
        <span class="tendina">-->tendina 1</span>
      </p>
      <p>
        <span class="menu">menu 2</span>
        <span class="tendina">-->tendina 2</span>
      </p>
      <p>
        <span class="menu">menu 3</span>
        <span class="tendina">-->tendina 3</span>
      </p>
    </div>

unico problema del codice che una volta selezionato un menu cliccandoci nuovamente sopra la tendina non scompare.
non sono capace a creare una funzione del genere, so che è banale ma sono alle prime armi , potete aiutarmi? ..
grazie.

effetto finale ---> http://mandorcraft.altervista.org/ca...levamento.html