Discussion :

[dedel53]

Bonjour

J'ai un petit soucis avec mon menu deroulant en jquery. Quand je passe ma souris sur le menu déroulant celui-ci ne se deroule pas

j'aurais besoin de vos lumières

Voici mon html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="menu">
          <ul id="menu_principal">
<li><a class="bouton_menu selected" href="#"><span>Campus</span></a>
				<div class="sousmenu">
					<ul>
						<li class="first"><a class="bouton_ssmenu" href="#">Handicap<div class="right">&nbsp;</div></a></li>
						<li><a class="bouton_ssmenu" href="#">Association<div class="right">&nbsp;</div></a></li>
						<li><a class="bouton_ssmenu" href="#">Culture<div class="right">&nbsp;</div></a></li>
						<li><a class="bouton_ssmenu" href="#">Sport<div class="right">&nbsp;</div></a></li>
						<li class="last"><a class="bouton_ssmenu" href="#">Portail Etudiant etudiant<div class="right">&nbsp;</div></a></li>
					</ul>
				</div>
            </li>
</ul>
</div>

mon css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
ul#menu_principal div.sousmenu {
	border: 0;
	position:absolute;
	z-index: 5;
	padding: 5px 0px 0px 0px;
	text-transform:none;
 
	margin-left:0px;
	/*float : left;*/
	white-space : nowrap;
}
ul#menu_principal div.sousmenu ul {
	position:relative;
	margin:0px; padding:0px;
	display:none;
}
 
ul#menu_principal div.sousmenu ul li {
	position:relative;
	float:none;
	background:url(images/item_ss_menu_gauche.gif) no-repeat left top;
}
ul#menu_principal div.sousmenu ul li.first {
	background:url(images/first_item_ss_menu_gauche.gif) no-repeat left top;
}
ul#menu_principal div.sousmenu ul li.last {
	background:url(images/last_item_ss_menu_gauche.gif) no-repeat left top;
}
 
ul#menu_principal div.sousmenu ul li div.right {
	position:absolute; top:0px; right:-2px;
	width:6px; height:18px;
	font-size:0px; line-height:0px;
	background:url(images/item_ss_menu_gauche.gif) no-repeat left top;
}
ul#menu_principal div.sousmenu ul li.first div.right {
	background:url(images/first_item_ss_menu_droite.gif) no-repeat right top;
}
ul#menu_principal div. ul li.last div.right {
	background:url(images/last_item_ss_menu_droite.gif) no-repeat right top;
}
 
ul#menu_principal div.sousmenu ul li a.bouton_ssmenu,
ul#menu_principal div.sousmenu ul li.first a.bouton_ssmenu,
ul#menu_principal div.sousmenu ul li.last a.bouton_ssmenu {
	font-size: 0.9em;
	color: #fff;
	display: block;
	padding-left:13px;
	padding-top:1px;
	padding-right:13px;
	height:17px;
}

mon js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$(document).ready(function(){
 
        $("#menu_principal li div.sousmenu").each(function(){
          $(this).mouseover(function(){
 
            $(this).children("div.sousmenu ul").show();
            $(this).prev().children("div.sousmenu ul").fadeOut("fast");
            $(this).siblings().children("div.sousmenu ul").fadeOut("fast");
          });
          $(this).mouseleave(function(){
 
 
            $(this).children("div.sousmenu ul").hide();
          });
        });
        $("body").click(function(){
          $("#menu_principal li div.sousmenu").fadeOut("fast");
        });
      });

merci beaucoup

[Kerod]

Tu as fait une recherche sur ce même forum avec de poster ?
Il y a 50% des sujets de ce forum qui correspondent à tes attentes et surtout qui parlent de menu déroulant.

[dedel53]

bah je ne trouve pas c'est pour ça que je poste ce message

[danielhagnoul]

Bonsoir.

Attention, on ne peut pas mettre une <div> dans un lien <a> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<li class="first">
    <a class="bouton_ssmenu" href="#">Handicap
        <div class="right">&nbsp;</div>
    </a>
</li>