Boites déroulantes au survol de la souris

Résolu

Profil bloqué -
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

Afficher la suite

A voir également:

Boites déroulantes au survol de la souris
Souris informatique - Guide
Souris bloqué pc portable - Guide
Pointeur souris - Guide
La boite a couleur - Télécharger - Divers Photo & Graphisme
Curseur souris disparu pc portable - Forum Périphériques

6 réponses

Réponse 1 / 6
jean448 Messages postés 1543 Statut Membre 240

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
Réponse 2 / 6
Profil bloqué

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
Réponse 3 / 6
jean448 Messages postés 1543 Statut Membre 240

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>

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


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


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


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


<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
Réponse 4 / 6
Profil bloqué

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
Réponse 5 / 6
Profil bloqué

ça marche super bien merci beaucoup et bravo pour votre site !
0
1. jean448 Messages postés 1543 Statut Membre 240
  
  Ça fait plaisir :)
  
  0
Réponse 6 / 6
Profil bloqué

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

Boites déroulantes au survol de la souris

6 réponses

Discussions similaires

Newsletters