Innanzitutto ciao a tutti e grazie a chi mi risponderà
Sicuramente avrò sbagliato sezione, quindi accetto ogni critica

Ho un problema costruendomi da solo (odio usare codice altrui senza conoscerlo) un drop down menu (non è puro css perchè necessito dell'evento click disponibile solo con jquery (altrimenti su smartphone non posso usarlo))
Necessiterei di un terzo livello

Il codice (html, css, jquery) è il seguente. Dove sbaglio?

codice:
<html>
    <head>
        <title>Prova DropDownMenu</title>
        <link rel="stylesheet" href="stile.css" type="text/css"/>
        <script src="jquery/jquery-2.0.3.js"></script>
        <script src="jquery.js"></script>
    </head>
    <body>
    <script>
            
        </script>
        <div class="menutendina">
            <ul class="liv1">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#sub">Crea</a>
                    <ul class="liv2">
                        <li>
                            <a href="#">Contatto</a>
                            <ul class="liv3">
                                <li>
                                    <a href="#">Singolo</a>
                                </li>
                                <li>
                                    <a href="#">Multiplo</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Affare</a>
                        </li>
                    </ul>
                </li>            
                <li>
                    <a href="#sub1">Visualizza</a>
                    <ul class="liv2">
                        <li>
                            <a href="#">Clienti</a>
                        </li>
                        <li>
                            <a href="#">Contratti</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Esci</a>
                </li>
            </ul>
        </div>
    </body>
</html>
codice:
div.menutendina{    
    color: white;
}


/*
    *Elenco puntato (livello uno) orizzontale (float:left)
*/
ul.liv1
{
    list-style: none;
    padding: 0;
    float:left;
}


/*
    *Punti dell'elenco puntato (livello uno) orizzontale (float:left)
*/
ul.liv1 li
{
    list-style: none;
    padding: 0;
    float: left;
}


/*
    *Elenco puntato (livello due) verticale (float:center) e nascosto (display:none)
*/
ul.liv2
{
    list-style: none;
    display:none;
    float:center;
}


/*
    *Punti dell'elenco puntato (livello due) verticale (float:center) e nascosto (display:none)
*/
ul.liv2 li
{
    list-style: none;
    padding: 0;
    float:center;
}


/*
    *Elenco puntato (livello tre) orizzontale (float:left) e nascosto (display:none)
*/
ul.liv3
{
    list-style: none;
    display:none;
    padding: 0;
    float:left;
}


/*
    *Punti dell'elenco puntato (livello tre) orizzontale (float:left) e nascosto (display:none)
*/
ul.liv3 li
{
    list-style: none;
    padding: 0;
    float:left;
}


/*---------------------------------INIZIO SEZIONE CRITICA--------------------------------------


    LE DUE CLASSI SEGUENTI SONO USATE PER IL MENU A DISCESA (DROPDOWN)
    Quando un punto del livello n che contiene un elenco di livello n+1
    viene premuto (evento jquery click) viene commutata la loro classe CSS:;
    l'elenco di livello n+1 desiderato diventa visibile (.visible) (display:list-item)
    (position:absolute); mentre gli altri eventuali elenchi di livello n+1 aperti
    precedentemente diventano invisible (.invisible) (display:none)




-----------------------------------------------------------------------------------------------*/


ul.visible
{
    display: list-item;
    position: absolute;
    padding: 0;
}


ul.invisible
{
    list-style: none;
    padding: 0;
    display:none;
}


/*---------------------------------FINE SEZIONE CRITICA--------------------------------------*/
codice:
$(document).ready(function(){
    $('li').click(function() 
    {
        /*
            *Per evitare che ci siano più menu di livello2 aperti contemporaneamente
            *rimuovo la classe CSS .visible ai (al) menu aperti e la sostituisco con .invisible
        */        
        $('.visible').removeClass('visible').addClass('invisible');


        /*
            *L'oggetto che ha avuto l'evento click ed ha un figlio di tipo ul
            *cambierà la sua classe da .invisible a .visible    
        */    
        $(this).children('ul').removeClass('invisible').addClass('visible');
    });
});