Espace entre éléments d'un menu déroulant

**nagyp** · 25/01/2020, 16h00

Bonjour.
j'ai un gros souci pour supprimer les espaces entre mes trois bloc "<ul class="col">"
je ne dois pas utiliser de flexbox et pas non plus e marge négatives.

Si l'un entre vous à une solution.
Je suis preneur.
Je rajoute les photos dans un fichier en pièce jointe.
Merci à tous.

LE

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="test.css">
</head>
<nav class="menu-panneau">
	<ul>
		<li class="item"><a href="#">Accueil</a></li>
 
 
		<li class="item"><a href="#">Tous Nos choix</a>
			<section class="panneau clearfix-overflow">
 
				<div class="container-panneau-menu">
					<ul class="col">
						<figure>
							<img src="img/menu-01.jpg">
						</figure>
					<h3>notre choix 1</h3>
						<li class="item-panneau"><a href="#">Choix 1.1 </a></li>
						<li class="item-panneau"><a href="#">Choix 1.2 </a></li>
						<li class="item-panneau"><a href="#">Choix 1.3 </a></li>
					</ul>
				</div>
 
				<div class="container-panneau-menu">
					<ul class="col">
								<figure>
									<img src="img/menu-03.jpg">
								</figure>
					<h3>notre choix 2</h3>
						<li class="item-panneau"><a href="#">Choix 2.1 </a></li>
						<li class="item-panneau"><a href="#">Choix 2.2 </a></li>
					</ul>
				</div>
 
				<div class="container-panneau-menu">
					<ul class="col">
								<figure>
									<img src="img/menu-02.jpg">
								</figure>
					<h3>notre choix 3</h3>
						<li class="item-panneau"><a href="#">Choix 3.1 </a></li>
						<li class="item-panneau"><a href="#">Choix 3.2 </a></li>
						<li class="item-panneau"><a href="#">Choix 3.3 </a></li>
					</ul>
				</div>
			</section>
		</li>
 
 
		<li class="item"><a href="#">Nos Triangles ronds</a>
			<section class="panneau">
 
				<div class="container-panneau-menu">
							<h3>nos surtriangles 2</h3>
					<ul class="col">
						<li class="item-panneau"><a href="#">Surtriangle 1.1</a></li>
						<li class="item-panneau"><a href="#">Surtriangle 1.2</a></li>
						<li class="item-panneau"><a href="#">Surtriangle 1.3</a></li>
					</ul>
				</div>
			</section>
		</li>
 
		<li class="item"><a href="#">contact</a>
			<section class="panneau">
				<div class="container-panneau-menu"></div>			
			</section>
		</li>

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
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
.menu-panneau {
	border-radius: 50px;
	background: -moz-linear-gradient(top, #444, #111 100%);
	background: -webkit-linear-gradient(top, #444, #111 100%);
	background: linear-gradient(to bottom, #444, #111 100%);
	-webkit-box-shadow: 0px 3px 5px 3px rgba(156,156,156,0.97); 
	box-shadow: 0px 3px 5px 3px rgba(156,156,156,0.97);
	position: relative;
}
.item { display: table-cell;}
 
.item > a {/* bare de menu */
	color: #f2f2f2;
	text-decoration: none;
    display: block;
    padding: 10px;
    margin-right: 3.5em;
}
 
.item a:hover {/* bare de menu */
	background: -moz-linear-gradient(top, #19b123, #139c19);
	background: -webkit-linear-gradient(top,#19b123, #139c19);
	background: linear-gradient(to bottom, #19b123, #139c19);
	color: #fafafa;
	-webkit-box-shadow: 0px 7px 10px 2px rgba(0,0,0,0.97); 
	box-shadow: 0px 7px 10px 2px rgba(0,0,0,0.97);
	text-decoration: none;
	background-color: #56799c;
}
.panneau {
	display: none;
	position: absolute;
	width: 30em;
	}
.item:hover .panneau {
	display: block;
}
figure {
		float: right;
		margin: 0px;
}
.clearfix-overflow {
	overflow: hidden;
}
.col {
	height: 11em;
	background: #19B123;
	background: -moz-linear-gradient(top, #19B123, #139C19);
	background: -webkit-linear-gradient(top, #19B123, #139C19);
	background: linear-gradient(to bottom, #19B123, #139C19);
}
 
.item-panneau, a {
	margin-top: 5px;
	text-decoration: none; 
}
 
h3 { padding-top: 30px; }

Espace entre éléments d'un menu déroulant

CSS

Mode arborescent

Discussions similaires

Partager

Partager