Bonjour,

Je travail sur un menu en CSS3
J'ai créer une maquette de menu avec des animations que je voudrait.
Je fait un carré avec les propriétés width et height
Tous ceux-ci dans un liste non ordonné
Alors j'ai une empreinte lorsque je survol l'élément dans le css,
normalement c'est un petit carre mais là c'est un rectangle qui prend trop de la place
et je voudrait supprimer l'espaces en trop
voici mon html:
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    </head>
 
    <body>
    <nav>
    	<ul class="primary-menu">
    		<li><a>Men</a><div class="flyout__tab"></div>
    			<ul class="sub-menu">
		    		<li><a>T-shirt</a></li>
		    		<li><a>Sweat</a></li>
		    		<li><a>Bags</a></li>
    				<li><a>Shoes</a></li>    				
    			</ul>
 
    		</li>
    		<li><a>Women</a><div class="flyout__tab"></div></li> 
    		<li><a>Kids</a><div class="flyout__tab"></div></li> 
    		<li><a>Indoor</a><div class="flyout__tab"></div></li> 
    		<li><a>Car</a><div class="flyout__tab"></div></li> 
    		<li><a>House</a><div class="flyout__tab"></div></li> 
    		<li><a>Trucks</a><div class="flyout__tab"></div></li> 
    		<li><a>Computer</a><div class="flyout__tab"></div></li> 
    		<li><a>Tablet</a><div class="flyout__tab"></div></li> 
    		<li><a>Phone</a><div class="flyout__tab"></div></li> 
    	</ul>
 
    </nav>
    </body>
</html>

et mon 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
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
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
 
ul.primary-menu{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 21px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
}
ul.sub-menu{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-flow: row nowrap;
  padding : 0; /* pas de marge intérieure */
  margin : 0; /* ni extérieure */
  list-style : none; /* on supprime le style par défaut de la liste */
  line-height : 21px; /* on définit une hauteur pour chaque élément */
  text-align : center; /* on centre le texte qui se trouve dans la liste */
}
 
ul.primary-menu li{
  background-color: black;
  color:white;
  width: 100%;
  height: 33px;
}
 
ul.sub-menu li{
  background-color: black;
  color:white;
  width: 100%;
  display: inline-table;
}
 
nav ul li:hover div.flyout__tab, div.flyout__tab:hover div.flyout__tab {
  background: #16242f;
  transition: transform 150ms 100ms;
  transform: rotate(45deg) scale(1);
}
 
nav ul.primary-menu li:hover ul.sub-menu{
 
  display: inline-table;
}
 
nav ul.primary-menu li a{
  display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  padding : 0; /* aucune marge intérieure */
  background : #000; /* couleur de fond */        
  color : #fff; /* couleur du texte */
  text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
 
}
 
ul.sub-menu{
  display: none;
}
 
div.flyout__tab {
  transition: transform 150ms 200ms;
  transform: rotate(0deg) scale(1);
  width: 1.5rem;
  height: 1.5rem;
  background-color: #FFFFFF;
  border: 1px solid #e5e5e5;
  margin-left: 53px;
}
je vous ai joint un screen shot de mon souci:

Nom : Capture d’e?cran 2017-07-10 a? 20.39.45.png Affichages : 186 Taille : 20,6 Ko

merci pour votre aide.