Affichage menu + sous menu sur un hover

Bonjour,

Je souhaite afficher le menu ainsi que le sous-menu sur le hover d'une image. C'est pour la création d'un menu déroulant pour smartphone. Avec le code ci-dessous je n'ai que le menu qui s'affiche mais pas les sous-menus.

<div id="imgclik"><img src="images/navsmart.png" alt=""/><p>MENU</p></div>
            <ul class="menusmart">
                
                
                <li><a class="actif" href="index.html">Accueil</a></li>
                <li><a>Notre association</a>
                    <ul class="niv2">
                        <li><a href="pages/president.html">Le Mot du président</a></li>
                        <li><a href="pages/bureau.html">Le bureau</a></li>
                        <li><a href="pages/cours.html">Nos cours</a></li>
                        <li><a href="pages/sorties.html">Nos sorties</a></li>
                        <li><a href="pages/calendrier.html">Calendrier</a></li>
                        <li><a href="pages/reglement.html">Règlement</a></li>
                        <li><a href="pages/forum.html">Notre Forum</a></li>
                        
                    </ul>
                </li>
                <li><a>Les Montages</a>
                    <ul class="niv2">
                        <li><a href="pages/seches.html">Les Sèches</a></li>
                        <li><a href="pages/noyees.html">Les Noyées</a></li>
                        <li><a href="pages/nymphes.html">Les Nymphes</a></li>
                        <li><a href="pages/streamers.html">Les Streamers</a></li>
                        <li><a href="pages/terrestre.html">Les Terrestres</a></li>
                    </ul>
                </li>
                <li><a>Contact</a>
                    <ul class="niv2">
                        <li><a href="#">Ou sommes nous ?</a></li>
                        <li><a href="#">Nous contacter</a></li>  
                    </ul>
                </li>
                
            </ul>

 /*-------------NAVIGATION MENU SMARTPHONE-----------*/

    
    nav .menusmart{
        display: none;
    }
    
    nav .menusmart li{
        border-bottom: 2px solid #456f44;
        height: 50px;
        line-height: 50px;
        text-align: center;
        list-style: none;
    }
    
    nav .menusmart li .niv2{
        display: none;
    }
    
    nav .menusmart li a{
        text-decoration: none;
        color: #456f44;
        font-family: "trebuchet ms";
        font-size: 16px;
    }
    
    nav .menusmart li .niv2 li{
        display: block;
        position: absolute;
        width: 100%;
        height: 50px;
    }
        
    nav  #imgclik{
        display: block;
        position: relative;
        width: 100%;
        height: 70px;
        margin-right: 10px;
        background-color: #456f44;
        
    }
    
    nav #imgclik:hover + .menusmart{
        display: block;       
    }
    
    nav #imgclik p{
        display: block;
        width: 80px;
        height: 70px;
        line-height: 70px;
        float: right;
        color: white;
        font-family: "trebuchet ms";
        font-size: 20px;
    }
    
    nav #imgclik img{
        display: block;
        width: 70px;
        height: 70px;
        float: right;
    }

mon problème se trouve ici je pense :
nav #imgclik:hover + .menusmart{
display: block;
}

Merci à l'avance pour l'aide qui me sera fournit.

Cordialement

Reptpyt

Hello,

J'ai une question qui peut paraître débile, mais comment comptes-tu gérer le hover sur un Smartphone ?

Cdlt