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

Anthony

Membre
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
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 !
 
Solution
display: block; pour tes sous-menus dans le CSS ça devrait le faire
CSS
.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;
}

Nicolas

Membre
display: block; pour tes sous-menus dans le CSS ça devrait le faire
CSS
.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;
}
 

L'occitan

Membre
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é
 

Ces discussions pourraient vous intéresser...

Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
Haut