Cibler un élément seulement si hover
Bonjour,
je m'occupe d'un menu.
Normalement, si on survole un item de niveau 1 et qu'un sous-menu existe, celui-ci est affiché. De même si on survole un item du sous-menu (menu de niveau 2) et qu'un sous-menu existe, celui-ci est affiché (menu de niveau 3).
Mon souci est qu'il n'est pas affiché seulement si on survole l'item de niveau 2 mais dès qu'on survole l'item de niveau 1. Le problème est clair sur ce codepen : http://codepen.io/laurentsc/pen/KaweLR
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<nav class="page">
<ul class="menu">
<li class="position plus"><a href="#">aide </a>
<ul class="displaynone">
<li ><a href="#">aide1 </a></li>
<li ><a href="#">aide2 </a></li>
<li class=" plus"><a href="#" >aide3</a>
<ul id="IPaddress displaynone">
<li ><a href="#">aide31 </a></li>
<li ><a href="#">aide32 </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav> |
Code:
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
|
.page{
font-size : 1.44em;
width:20%;
}
.menu {
background:lightgreen;
border: 1px solid #48B;
line-height:2em;
height:6.5em;
font-size:0.8em;
}
/* Barre de menu principale */
.menu a {
display:block;
margin:0;
padding:0.5em;
font-weight:bold;
text-decoration:none;
color:#00F;
position : relative;
}
.menu ul.displaynone{
display:none;
position:absolute;
margin:0;
padding:0;
left:0;
top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
line-height:1.0em;
}
.menu li {
float:left;
position:relative;
list-style: none;
}
/* modification lien sous menus */
.menu ul li a {
color:#666;
font-weight:normal;
}
.menu li:hover > a {
text-decoration:underline;
}
.menu li:hover > ul{
display: block;
/* propriétés suivantes mises sur le HOVER, bug sur IE7 */
background: #FEFEFF;
border:solid 1px #48B;
}
/* position et dimension des sous menus */
.menu ul li {
margin:0;
width:10.5em;
}
.menu ul ul {
left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
top: -1px; /* tient compte de la largeur de la bordure */
position:absolute;/* position needed for use of float */
float:right; /
}
/* indicateur de présence d'un sous menu */
li.plus:before{
content: "\25BA";
float:right;
color:#ABC;
position:relative;
top:7px;
} |
pourquoi ?
