La solution doit être simple, mais je sèche
J’ai un menu avec liste déroulante, mais au hover du menu déroulant les deux premiers éléments descendent et le background augmente de hauteur.
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test nav</title>
	<style>
body{
  font-family: 'Lato', sans-serif;
  font-size: 1.2em;
  background-color: #d3d3d3;
}
 
header img{
  width:100%;
}
nav{
  background-color: #7588A9;
    margin-bottom: 5%;
}
/*nav ul{
 
  background-color: #7588A9;
}*/
nav ul li{
  position: relative;
  z-index:10;
  display:inline-block;
  margin-left: 10%;
  color:white;
  font-size: 2em;
  float:none;
  background-color: transparent;
  border: 0px;
}
nav ul li a{
  color:#A5A5A5;
  padding-left:1.2vw;
  padding-right:1.2vw;
  }
 
nav ul li a:hover{
  color:white;
  text-decoration: none;
  background-color:#3B4663;
  overflow:hidden;
  }
 
nav ul ul{
position: absolute;
z-index: 150;
display: none;
background-color:white;
}
 
 
 
nav li:hover ul {
display:block;
position: relative;
left: 5%; 
top: 5%; 
margin: 0px; 
padding: 0px;
font-size: 0.4em;
overflow:hidden;
}
 
nav li:hover ul li{
 display:inherit;
}
 
	</style>
</head>
<body>
	<nav>
		<ul>
		<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a>
<ul>
<li><a href="#">inter2</a>></li>
<li><a href="#">inter3</a></li>
</ul>
			</li>
		</ul>
	</nav>
 
 
</body>
</html>