Menu de boutons accordéon au survol de la souris

Version imprimable

Bonjour,
Je souhaite réaliser un menu accordéon qui se déplie au survol de la souris pour laisser apparaitre des boutons.
Je ne suis pas arrivé à le faire sans JS. Pb ,je ne connais pas le JS donc je rame un peu. J'ai trouvé des exemples en JS mais que pour du Onclick ( Je veux absolument du survol ).
Mes boutons sont de la forme :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="cadre">
         <h4>Menu1</h4> 
                  <form action="page.php" method="POST"  >
                 <input  type="hidden" name="choix_accueil" value="valeur_a_envoyer1">
                 <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
                 </form> 
 
                  <form action="page.php" method="POST"  >
                 <input  type="hidden" name="choix_accueil" value="valeur_a_envoyer2">
                 <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
                 </form> 
 
        <h4>Menu2</h4> 
                 <form action="page.php" method="POST"  >
                 <input  type="hidden" name="choix_accueil" value="valeur_a_envoyer3">
                 <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
                 </form> 
  </div>

Merci pour votre aide.

Bonjour,

Citation:

... Je veux absolument du survol ...

en modifiant légèrement la structure HTML tu peux résoudre cela en CSS.

Structure HTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="cadre">
    <div class="over">
        <h4>Menu1</h4>
        <form action="page.php" method="POST">
            <input type="hidden" name="choix_accueil" value="valeur_a_envoyer1">
            <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
        </form>
        <form action="page.php" method="POST">
            <input type="hidden" name="choix_accueil" value="valeur_a_envoyer2">
            <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
        </form>
    </div>
    <div class="over">
        <h4>Menu2</h4>
        <form action="page.php" method="POST">
            <input type="hidden" name="choix_accueil" value="valeur_a_envoyer3">
            <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
        </form>
    </div>
</div>

le CSS minimum est le suivant :

Code:

1
2
3
4
5
6
.over form {
    display: none;
}
.over:hover form {
    display: block;
}

12/07/2020, 18h59
SM_05

C'est top, je ne pouvais pas rêver mieux.
Merci beaucoup !