css Sous-menu qui s'ouvrent quand hover (menus accordéons)

[Anthony]

Hello,

Je cherche à créer des sous-menus qui s'ouvrent en survolant le titre de leurs menus respectifs.
J'ai un petit code HTML mais je coince sur le CSS, je pourrais en JS mais je souhaite aucun script sur cette page (c'est pour un test).

Voici le HTML

<nav class="navigation">
    <a href="#" class="Menu">Menu</a>
    <div class="menu-right">
        <div class="main-item">
            <a>Classe</a>
             <div class="sub-items">
                <a href="#">Classe A</a>
                <a href="#">Classe B</a>
              </div>
        </div>
        <div class="main-item">
              <a>Propriétés</a>
              <div class="sub-items">
                <a href="#">Propriété A</a>
                <a href="#">Propriété B</a>
              </div>
           </div>
    </div>
</nav>

Comment gérer ça avec CSS ?
Merci !

 

[Wazz9]

Anthony pose des questions maintenant ? Mais où va t-on ??

 

[Nicolas]

display: block; pour tes sous-menus dans le CSS ça devrait le faire

.main-item {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.main-item .sub-items {
    display: none;
}

.sub-items a {
    display: block;
}

.main-item:hover .sub-items {
    display: block;
    position: absolute;
}

 

[Cascadeur]

Salut, j'ai testé sur Codepen et ça fonctionne par contre quelle est la modification à faire pour que les menus s'ouvrent non plus automatiquement mais au clic ?

 

[L'occitan]

Bonjour Cascadeur, pas certain que cela puisse se faire uniquement avec du HTML il te faudra passer par un peu de code JS ou JQuery.
J'ai vu un tuto sur le forum à ce propos, ça pourrait être adapté

TUTORIEL - jQuery : cacher/montrer un bloc par simple clic

jQuery Ce petit tutoriel n'a pas vocation à vous apprendre à utiliser jQuery mais simplement à vous montrer comment cette bibliothèque JavaScript fonctionne. Vous pouvez découvrir de manière plus approfondie dans ce tutoriel : jQuery ...

cocoriweb.community

 

[Anthony]

Bonsoir et merci pour la réponse Nico c'est ce qu'il me fallait !
@Wazz9 : il y en aura d'autres !