Bonjour,

Je ne sais pas si mon titre est claire...

Je cherche à faire apparaitre un sous menu horizontal sous un menu lui aussi horizontal... Le problème, c'est que le sous menu apparait bien lorsque l'on passe sur un élément du menu, mais il disparait la première fois que l'on va dessus et reste bien si on y reviens > pour voir ça en action : http://www.yadlapomme.com/testzone/j...nu1/test1.html

Il y a un 0 ou un 1 qui apparait pour visualiser une variable indiquant si le sous menu et ouvert ou pas...

Voici le code de la page :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css.css" type="text/css" media="all" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type='text/javascript'>
            var obj = null;
            var sous_menu_on = 0;
 
            function checkHover() {
                //alert(sous_menu_on);
                if (obj) {
                    $("#alerte").text(sous_menu_on);
                    obj.hover(function() {
                        sous_menu_on = 1;
                    }, function() {
                        sous_menu_on = 0;
                        // alert("checkover out");
                    });
                    $("#alerte").text(sous_menu_on);
                    if(sous_menu_on==0){
                        obj.hide();
                        obj = null;
                    }//if
                } //if
 
 
            } //checkHover
 
            $(document).ready(function() {
 
                $('#conteneur_menu > a').hover(function() {
                    if (obj) {
                        obj.hide();
                        obj = null;
                        sous_menu_on = 0;
                    } //if
                    menu_id = $(this).attr('id');
                    $('#sous_'+menu_id).show();
                }, function() {
                    obj = $('#sous_'+menu_id);
                    setTimeout(
                    "checkHover()",
                    0); // si vous souhaitez retarder la disparition, c'est ici
                });
 
            });
        </script>
    </head>
    <body>
        <div id="conteneur_menu">
            <a href="#" class="accueil" id="menu_1">accueil</a>
            <a href="#" class="critiques" id="menu_2">critiques</a>
            <a href="#" class="actualites" id="menu_3">actualités</a>
            <a href="#" class="agenda" id="menu_4">agenda</a>
            <a href="#" class="portraits" id="menu_5">portraits</a>
            <a href="#" class="interviews" id="menu_6">interviews</a>
            <a href="#" class="reportages" id="menu_7">reportages</a>
            <a href="#" class="videos" id="menu_8">vidéos</a>
            <a href="#" class="breves" id="menu_9">brèves</a>
            <a href="#" class="tribunes" id="menu_10">tribune</a>
        </div>
        <div id="conteneur_sous_menu">
            <div id="sous_menu_1" class="sous_menu">
                accueil xxxxxxxx
            </div>
            <div id="sous_menu_2" class="sous_menu">
                critiques
            </div>
            <div id="sous_menu_3" class="sous_menu">
                actualites
            </div>
            <div id="sous_menu_4" class="sous_menu">
                agenda
            </div>
            <div id="sous_menu_5" class="sous_menu">
                portraits
            </div>
            <div id="sous_menu_6" class="sous_menu">
                interviews
            </div>
            <div id="sous_menu_7" class="sous_menu">
                reportages
            </div>
            <div id="sous_menu_8" class="sous_menu">
                videos
            </div>
            <div id="sous_menu_9" class="sous_menu">
                breves
            </div>
            <div id="sous_menu_10" class="sous_menu">
                tribunes
            </div>
            <div id="alerte"></div>
        </div><!--#conteneur_sous_menu-->
    </body>
</html>
et le 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
 
*{
    margin: 0px;
    padding: 0px;
}
#conteneur_menu{
    float:left;
    width: 930px;
    height: 24px;
    background-color: #cc00ff;
}
#conteneur_menu a{
    float: left;
    height:24px;
    padding-right: 10px;
}
#sous_menu{
    float:left;
    width: 978px;
    height: 52px;
    clear:both;
}
#conteneur_sous_menu{
    float:left;
    width: 918px;
    height: 52px;
    background-color: #ff0;
}
div.sous_menu{
    display: none;
    background-color: #f00;
    height:30px;
}
Est ce que quelqu'un aurait une idée pour éviter cela ?

Merci d'avance de votre aide...