Discussion :

[CCACC02]

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

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
<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 :

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
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

[NoSmoking]

Bonjour,
ton code HTML n'est pas correct, tu as une fermeture de balise </li> en trop

Code html :

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

1
2
<li class="item"><a href="#">Item 1</a>    <!-- </li> à supprimer -->
    <section class="panneau clearfix-overflow">

ton élément section n'est donc pas enfant de <li>.

[CCACC02]

Merci, cette erreur de relecture me pénalise.. je tacherai d'être plus vigilant. Encore merci pour ton aide