Menu deroulant qui décale les autres éléments

**rvm31** · 03/05/2016, 22h44

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>

Invité · 04/05/2016, 09h56

Bonjour aussi...

Et la question est... ?

La galerie CSS : Menus horizontaux

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
nav li:hover ul {
display:block;
/*position: relative;*/ /* SUPPRIMER */
left: 5%; 
top: 100%; /* MODIFIER */
...
}
 
...
 
nav ul li a{
...
  text-decoration:none; /* AJOUTER */
  }

Merci aussi... re-

**rvm31** · 04/05/2016, 20h21

ok ça fonctionne, merci.

Menu deroulant qui décale les autres éléments

CSS

Discussions similaires

Partager

Partager