Boites déroulantes au survol de la souris

Résolu/Fermé
Profil bloqué - 21 juin 2013 à 20:52
 Profil bloqué - 21 juin 2013 à 22:40
Comment insérer une boite déroulante de 5 liens dans une autre de 3... Comme sur ce site
http://le-blog-facile.ek.la/boites-deroulantes-au-survol-de-la-souris-p346459
A voir également:

6 réponses

jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
Modifié par baladur13 le 26/10/2013 à 21:15
Salut
Je vois pas trop ton problème, du fait que tout est expliqué sur la même page

Signature non conforme supprimée par la Modération CCM
0
Profil bloqué
21 juin 2013 à 21:11
regarde ici alors http://pito2901.blogspot.com/p/mes-videos.html

Mon souci est que je veux faire sur la droite, un boite déroulante qui contient 5 "sous-"boites déroulantes et ces 5 la, je voudrais quelle contiennent chacune environ 10 liens.

je cherche en fait à avoir le code.
0
jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
21 juin 2013 à 21:38
Salut

Voilà le code il suffit de l'adapter ( couleur, taille, nb de li... , mais le plus gros est fais)

<!doctype html>
<html lang="fr">
<head>
<title>Ma page</title>
<style>
.ma_boite
{
width:200px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}

.ma_boite:hover
{
height:200px;
}
.title_box
{
color:black;
background-color:salmon;
border: 1px solid black;
border-radius: 5px;
}

.ma_sous_boite
{
width:150px;
height:18px;
overflow:hidden;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}

.ma_sous_boite:hover
{
height:90px;
}
.title_sous_box
{
color:black;
background-color:#00A500;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>

<body>
<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>

<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>

<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>

<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>

<!--Début d'une grande boite-->
<div class="ma_boite">
<div class="title_box">Boite texte</div>
<div class="content_box" style="overflow: none;">
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
<div class="ma_sous_boite">
<div class="title_sous_box">Sous boite</div>
<div class="content_sous_box" style="overflow: none;"><a href="">Lien 1</a><br><a href="">Lien 2</a></div>
</div>
</div>
</div>
</body>
</html>
0
Profil bloqué
21 juin 2013 à 21:39
Merci bien, je teste puis vous répond le plus vite possible.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Profil bloqué
21 juin 2013 à 22:22
ça marche super bien merci beaucoup et bravo pour votre site !
0
jean448 Messages postés 1331 Date d'inscription mardi 29 décembre 2009 Statut Membre Dernière intervention 26 janvier 2017 237
21 juin 2013 à 22:38
Ça fait plaisir :)
0
Profil bloqué
21 juin 2013 à 22:40
sinon, est-ce vous savez comment mettre des couleurs différentes, i.e. mon menu à gauche en vert et celui que vous avez créé en noir par exemple...
0