Bonsoir,
J'aimerais savoir comment faire pour ajouter de la fluidité à mon menu déroulant. J'ai essayé d'utiliser max-height ainsi qu'une transition mais je n'obtiens pas le résultat souhaité.
Quelqu'un pourrait il me dire comment je dois m'y prendre?
Merci beaucoup
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 <head> <meta charset="UTF-8"> <link rel="stylesheet" href="menuderoulant.css" type="text/css" /> <title>Menu Deroulant</title> </head> <body> <nav id="menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Présentation</a> <ul> <li><a href="#">Sous-Menu 1</a></li> <li><a href="#">Sous-Menu 2</a></li> <li><a href="#">Sous-Menu 3</a></li> <li><a href="#">Sous-Menu 4</a></li> </ul> </li> <li><a href="#">Références</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
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
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 #menu ul { margin: 0; padding: 0; text-align: center; cursor: pointer; border-radius: 0 0 8px 8px; } #menu li { float: left; display: inline-block; width: 25%; } #menu li a { text-decoration: none; color: white; background: #3B4E77; display: block; border-radius: 10px; padding: 6px; } #menu ul ul li { display: none; } #menu ul li:hover ul li { display: block; width: 100%; margin-top: 1px; -webkit-transition: all 1s; transition: all 1s; } #menu li a:hover { background-color: #cc0 } #menu li a:active { background-color: #5F879D }
Partager