Menu panneau qui reste caché au survol
Bonjour Amis de ce forum,
Voici mon code HTML et CSS, je voudrais savoir ce que je fais mal pour que mon menu panneau ne s'affiche pas au roll-over :calim2::calim2::calim2:
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
| <nav class="menu-panneau">
<ul>
<li class="item"><a href="#">Item 1</a></li>
<section class="panneau clearfix-overflow">
<figure class="img-fl-l">
<img src="wheat.jpg">
</figure>
<div class="container-panneau-menu">
<h3>Sous Menu 1</h3>
<ul class="col">
<li class="item-panneau"><a href="#">Item Sous Menu 1</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 2</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 3</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 4</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 5</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 6</a></li>
</ul>
</div>
<div class="container-panneau-menu">
<h3>Sous Menu 2</h3>
<ul class="col">
<li class="item-panneau"><a href="#">Item Sous Menu 1</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 2</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 3</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 4</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 5</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 6</a></li>
</ul>
</div>
<div class="container-panneau-menu">
<h3>Sous Menu 3</h3>
<ul class="col">
<li class="item-panneau"><a href="#">Item Sous Menu 1</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 2</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 3</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 4</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 5</a></li>
<li class="item-panneau"><a href="#">Item Sous Menu 6</a></li>
</ul>
</div>
</section>
</li>
<li class="item"><a href="#">Item 2</a></li>
<li class="item"><a href="#">Item 3</a></li>
<li class="item"><a href="#">Item 4</a></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
| ul, li{
list-style: none;
padding: 0;
margin: 0;
}
.menu-panneau{
padding: 0;
margin: 0;
margin-top: 55px;
background-color: #34495e;
position: relative;
}
.item{
display: table-cell;
}
.panneau{
background-color: #ededed;
padding: 2em;
display: none;
position: absolute;
left: 0;
right: 0;
}
.item:hover .panneau{
display: block;
}
.item > a {
color: #c4e9f5;
text-decoration: none;
display: block;
padding: 10px;
border-right: 1px solid #ddd;
}
.item a:hover{
color: black;
text-decoration: none;
background-color: #56799c;
}
.img-fl-l{
margin-right: 20px;
float: left;
}
.clearfix-overflow{
overflow: hidden;
}
.container-panneau-menu{
display: inline-block;
vertical-align: top;
margin: 0 auto;
margin: 0 20px 0 0;
}
.container-panneau-menu h3{
color: #8b2040;
text-align: center;
margin-bottom: 5px;
}
.container-panneau-menu a{
display: block;
color: #2c3e50;
font-size: 0.9em;
text-decoration: none;
}
.container-menu-panneau a:hover{
text-decoration: underline;
background-color: transparent;
color: #8b2040;
} |
D'avance merci pour vos conseils :mrgreen:
Merci, une bete erreur de relecture
Merci, cette erreur de relecture me pénalise.. je tacherai d'être plus vigilant. Encore merci pour ton aide :oops::oops::oops::oops:
