Mouse hover sur un menu UL/LI

**tiamat** · 16/04/2018, 11h04

Bonjour à tous,

je suis confronté à un problème assez étrange sur un template Bootstrap que j'ai acheté...
j'ai un menu horizontal permettant la sélection de mes différentes pages, ce menu est constitué de la manière suivante:

Code html :

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
 
<aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li class="nav-devider"></li>
                        <li class="nav-small-cap">Accueil</li>
                        <li> <a class="has-arrow waves-effect waves-dark" href="index.jsp" aria-expanded="false"><i class="mdi mdi-home"></i><span class="hide-menu">Accueil</span></a>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-home-modern"></i><span class="hide-menu">Menu 1</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>                                
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                                <li><a href="#">page6</a></li>
                                <li><a href="#">page7</a></li>
                                <li><a href="#">page8</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-bank"></i><span class="hide-menu">Finances </span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                                <li><a href="#">page6</a></li>
                                <li><a href="#">page7</a></li>
                                <li><a href="#">page8</a></li>
                                <li><a href="#">page9</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-cube-unfolded"></i><span class="hide-menu">Configuration </span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-forum"></i><span class="hide-menu">Forum</span></a>
                        <li> <a class="has-arrow waves-effect waves-dark" href="mail.jsp" aria-expanded="false"><i class="mdi mdi-email"></i><span class="hide-menu">Messagerie</span></a>
                        </li>
                        <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-settings"></i><span class="hide-menu">Paramètres</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                            </ul>
                        </li>
 
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>

le problème que j'ai c'est que certaines fois (sous Chrome / IE / Firefox) en passant avec la souris sur le menu j'ai bien le menu déroulant qui s'affiche mais en descendant la souris dessus le menu disparaît et je ne peux pas cliquer sur le déroulant.
Mais chose très surprenante quelques fois le menu reste accessible et ne disparaît pas en passant dessus....donc je me retrouve à avoir un comportement non systématique....en clair une horreur à débugger.

je m'en remet à votre expérience, et si vous voulez des extracts du css dites moi.

Merci,
Tiamat.

Invité · 16/04/2018, 11h26

Bonjour,

La seule façon efficace de t'aider est de voir une page en ligne.

Sinon, on ne peut faire que des suppositions... et encore...

**tiamat** · 16/04/2018, 11h43

Merci pour ta réponse...et effectivement tu as raison, je mets ça en ligne car pour le moment je bosse sur Xampp en local. je vous transmet le lien rapidement.

**JefReb** · 17/04/2018, 08h13

Il est vrai qu'une page en ligne aiderait, et je ne pense pas que le problème se situe dans le code html. Ce serait plutôt dans le css qu'il faudrait chercher, mais qui est absent.
Pour avoir eut un problème similaire, cela se situait plutôt dans une position du menu absolute ou relative et d'un z-index.
Voyons la page pour voir ....

**tiamat** · 17/04/2018, 11h47

bonjour à tous,

voici le lien: http://5.39.80.220:8080/test/display_test.html

donc comme je vous disai, les menus déroulent bien mais la plupart du temps le menu se rétracte en passant la souris dessus, certaines fois le menu reste affiché ce qui permet de sélectionner les sous menus.

Merci pour votre aide !
Tiamat.

Invité · 17/04/2018, 15h57

Code html :

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

1
2
3
4
5
6
7
8
    <script>
        $(document).ready(function() {
 
            //loading top menu
            $("#menuTop").load("menu_test.html");
 
        });
    </script>

Ton menu est chargé via jQuery, depuis le fichier menu_test.html...
Que voici :

Code html :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- ============================================================== -->
                <!-- Logo -->
                <!-- ============================================================== -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                         <!-- Light Logo text -->    
                </div>
                <!-- ============================================================== -->
                <!-- End Logo -->
                <!-- ============================================================== -->
                <div class="navbar-collapse">
                    <!-- ============================================================== -->
                    <!-- toggle and nav items -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav mr-auto">
                        <!-- This is  -->
                        <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                        <li class="nav-item hidden-sm-down"><span></span></li>
                    </ul>
                    <!-- ============================================================== -->
                    <!-- User profile and search -->
                    <!-- ============================================================== -->
                    <ul class="navbar-nav my-lg-0">
 
                        <!-- ============================================================== -->
                        <!-- Comment -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
                                <div class="notify"> </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right mailbox animated bounceInDown">
                                <ul>
                                    <li>
                                        <div class="drop-title">Notifications</div>
                                    </li>
                                    <li>
                                        <div class="message-center">
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
                                                <div class="mail-contnet">
                                                    <h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
                                                <div class="mail-contnet">
                                                    <h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
                                                <div class="mail-contnet">
                                                    <h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
                                                <div class="mail-contnet">
                                                    <h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- ============================================================== -->
                        <!-- End Comment -->
                        <!-- ============================================================== -->
                        <!-- ============================================================== -->
                        <!-- Messages -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
                                <div class="notify"> </div>
                            </a>
                            <div class="dropdown-menu mailbox dropdown-menu-right animated bounceInDown" aria-labelledby="2">
                                <ul>
                                    <li>
                                        <div class="drop-title">You have 4 new messages</div>
                                    </li>
                                    <li>
                                        <div class="message-center">
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="user-img"> <img src="../assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
                                                <div class="mail-contnet">
                                                    <h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="user-img"> <img src="../assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
                                                <div class="mail-contnet">
                                                    <h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="user-img"> <img src="../assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
                                                <div class="mail-contnet">
                                                    <h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
                                            </a>
                                            <!-- Message -->
                                            <a href="#">
                                                <div class="user-img"> <img src="../assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
                                                <div class="mail-contnet">
                                                    <h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <!-- ============================================================== -->
                        <!-- End Messages -->
                        <!-- ============================================================== -->
                        <!-- ============================================================== -->
                        <!-- Profile -->
                        <!-- ============================================================== -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/users/1.jpg" alt="user" class="profile-pic" /></a>
                            <div class="dropdown-menu dropdown-menu-right animated flipInY">
                                <ul class="dropdown-user">
                                    <li>
                                        <div class="dw-user-box">
                                            <div class="u-img"><img src="../assets/images/users/1.jpg" alt="user"></div>
                                            <div class="u-text">
                                                <h4>Steave Jobs</h4>
                                                <p class="text-muted">varun@gmail.com</p><a href="pages-profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
                                        </div>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"><i class="ti-user"></i> My Profile</a></li>
                                    <li><a href="#"><i class="ti-wallet"></i> My Balance</a></li>
                                    <li><a href="#"><i class="ti-email"></i> Inbox</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"><i class="ti-settings"></i> Account Setting</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#"><i class="fa fa-power-off"></i> Logout</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- ============================================================== -->
        <!-- End Topbar header -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->
 <aside class="left-sidebar">
            <!-- Sidebar scroll-->
            <div class="scroll-sidebar">
                <!-- Sidebar navigation-->
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <li class="nav-devider"></li>
                        <li class="nav-small-cap">Accueil</li>
                        <li> <a class="has-arrow waves-effect waves-dark" href="index.jsp" aria-expanded="false"><i class="mdi mdi-home"></i><span class="hide-menu">Accueil</span></a>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-home-modern"></i><span class="hide-menu">Menu 1</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>                                
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                                <li><a href="#">page6</a></li>
                                <li><a href="#">page7</a></li>
                                <li><a href="#">page8</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-bank"></i><span class="hide-menu">Finances </span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                                <li><a href="#">page6</a></li>
                                <li><a href="#">page7</a></li>
                                <li><a href="#">page8</a></li>
                                <li><a href="#">page9</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-cube-unfolded"></i><span class="hide-menu">Configuration </span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                                <li><a href="#">page5</a></li>
                            </ul>
                        </li>
                        <li><a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-forum"></i><span class="hide-menu">Forum</span></a>
                        <li> <a class="has-arrow waves-effect waves-dark" href="mail.jsp" aria-expanded="false"><i class="mdi mdi-email"></i><span class="hide-menu">Messagerie</span></a>
                        </li>
                        <li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-settings"></i><span class="hide-menu">ParamÃ¨tres</span></a>
                            <ul aria-expanded="false" class="collapse">
                                <li><a href="#">page1</a></li>
                                <li><a href="#">page2</a></li>
                                <li><a href="#">page3</a></li>
                                <li><a href="#">page4</a></li>
                            </ul>
                        </li>
 
                    </ul>
                </nav>
                <!-- End Sidebar navigation -->
            </div>
            <!-- End Sidebar scroll-->
        </aside>
        <!-- ============================================================== -->
        <!-- End Left Sidebar - style you can find in sidebar.scss  -->
        <!-- ============================================================== -->

On y voit déjà des erreurs de structure HTML :

Code html :

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

1
2
3
4
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                         <!-- Light Logo text -->    
                </div>

Le <a> n'est pas fermé, par exemple.

Toutes ces erreurs sont à corriger avant de poursuivre.

**tiamat** · 17/04/2018, 18h16

Merci jreaux62 pour ton message.

j'avais effectivement oublié le </a>, c'est corrigé...
Par contre quel est le problème de charger le menu avec JQuery ? je l'ai fait volontairement pour décoreller le menu du contenu de la page, cela me permettra de réutiliser le même menu sur plusieurs pages, et en cas de modif de menu de n'avoir qu'un seul fichier à modifier.

Edit :
bon j'ai trouvé mon erreur....
il y avait un espace entre le menu principal et le sous menu....de fait il disparaissait etant donné qu'il considérait que j'etais sorti du menu...

j'ai donc enlevé top: 57px dans mon css pour

Code css :

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

.mini-sidebar .sidebar-nav #sidebarnav>li>ul

Mouse hover sur un menu UL/LI

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager