Affichage d'un menu déroulant

**supcomingenieur** · 22/05/2013, 15h37

Bonsoir,

J'ai créé un menu déroulant (en accordian).
Le code html est le suivant :

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
 
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" charset="utf-8"> 
 
</head>
 
<body>
<header>
 
</header>
 
<div class="wrap">
<ul class="menu">
 
 
  <li><a href="#">Server monitoring</a>
 
  </li> 
 
  <li><a href="#">Routing</a>
    <ul>
      <li><a href="#"><img src="arrow.png">Route History</a>
      <li><a href="#"><img src="arrow.png">IPv4 and IPv6 prefixes</a>
      <li><a href="#"><img src="arrow.png">Received and Advertised prefixes</a>
      <li><a href="#"><img src="arrow.png">Masks</a>
    </ul>
  </li> 
 
  <li><a href="#">Peers</a>
    <ul>
      <li><a href="#"><img src="arrow.png">Bgp Updates exchanged</a>
      <li><a href="#"><img src="arrow.png">Other</a>
      <li><a href="#"><img src="arrow.png">photoshop</a>
    </ul>
  </li> 
 
    <li><a href="#">Traffic and Througput</a>
    <ul>
      <li><a href="#"><img src="arrow.png">Total traffic</a>
      <li><a href="#"><img src="arrow.png">Total Throughput</a>
      <li><a href="#"><img src="arrow.png">Applicationss</a>
    </ul>
  </li> 
 
<li><a href="#">Alarms</a>
    <ul>
      <li><a href="#"><img src="arrow.png">Chassis state</a>
      <li><a href="#"><img src="arrow.png">Route state</a>
      <li><a href="#"><img src="arrow.png">Traffic state</a>
      <li><a href="#"><img src="arrow.png">Peers state</a>
    </ul>
  </li> 
 
 
</ul>
 
 
</div>
 
</body>
</html>

Le code CSS est le suivant :

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
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
 
@font-face {
    font-family: 'FjordOne';
    src: url('font/FjordOne-Regular-webfont.eot');
    src: url('font/FjordOne-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/FjordOne-Regular-webfont.woff') format('woff'),
         url('font/FjordOne-Regular-webfont.ttf') format('truetype'),
         url('font/FjordOne-Regular-webfont.svg#FjordOne') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
 
body{
	background:url(/css/table-images/bg.jpg) repeat;
	font-family: 'FjordOne';
}
 
.wrap{
	margin: 1 auto;
	width:300px;
}
 
.menu{
	padding:0;
	list-style:none;
	width:300px;
	font-size:18px;
	background:#c1c1c1;
	border: 1px solid rgba(0,0,0,0.8);
}
 
.menu li a{
	display: block;
	border-bottom: 1px solid rgba(0,0,0, 0.2);
	border-top: 1px solid rgba(255,255,255, 0.2);
	background:#3e3f44;
	text-decoration:none;
	color:#FFF;
	text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
	filter: dropshadow(color=#000, offx=1, offy=0);
	padding:10px;
	padding-left:20px;
}
 
.menu li ul li a{
	font-size:14px;
	color:#009900;
	text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
	filter: dropshadow(color=#000, offx=1, offy=0);
}
 
.menu li a:hover{
	background:#FF9900;
}
 
.menu ul{
	margin:0;
	padding:0;
	list-style:none;
	height:0;
	overflow: hidden;
	transition:1s;
	-moz-transition:1s;
	-webkit-transition:1s;
}
 
.menu li:hover ul{
	height:120px;
	overflow-y:auto;
	overflow-x:hidden;
}
 
.menu ul li a{
	background:#d2d2d2;
}
 
.menu ul li a:hover{
	background:#c1c1c1;
}
 
.menu ul li a img{
	margin-right:10px;
}

J'ai un petit problème au niveau de l'affichage. Les sous niveaux de la partie ALARM ne sont pas tous affichés : seuls trois sont affichés. Le dernier n'est aperçu que lorsque j'utilise le scrolling. J'ai essayé de désactiver cette fonction en mettant overflow à hidden dans mon code CSS mais ça ne règle pas le problème.
Un autre problème est que si j'essaie de retirer un sous niveau, il me reste un rectangle peint en gris, c'est-à-dire que il y a bien trois sous niveaux même si j'en supprime un.

Comment résoudre ceci ?
Merci.

**saymoneu** · 22/05/2013, 16h15

Bonjour,

Déjà, je remarque un problème: vous ne fermez pas tous vos li (aucun des li imbriqués !).
Après, c'est normal qu'il y ait un scrolling vu que vous avez spécifié une height fixe à votre ".menu li:hover ul".
Essayez un height:auto; ou height:100%; a la place et vos 2 problèmes seront peut-être réglés.

**supcomingenieur** · 22/05/2013, 16h25

lorsque je met height à auto ou 100%, l'animation disparait il n'a plus cette transition de 1s pour dérouler le menu.
pour l'autre problème, j'ai fermé mes balises li mais le problèmes persite, lorsque j'enlève le troisièmme sous niveau du niveau "peers". Il reste un rectangle gris.

**saymoneu** · 22/05/2013, 16h33

C'est lié à votre height:120px. Je viens de tester, certes on perd l'animation mais la liste prend bien la bonne hauteur.
Il doit bien y avoir un moyen de conserver l'animation. En javascript, je saurais le faire, mais en css je préfere laisser ça aux experts

.