#nav {
	padding: 0; margin: 0;
}
#nav li {
	display: inline;
	list-style: none; /* nécessaire pour IE7 */
}
#nav {
	padding: 0; margin: 0;
	text-align: center; /* centrer le texte */
}
#nav li {
	display: inline;
	list-style: none;
}
#nav a {
	display:inline-block;
	margin: 0 0px;
}


#nav a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}
#nav > li,
#nav > li li {
	position: relative;
	display:inline-block;
	width: 150px;
	padding: 6px 15px;
	background-color: #777;
	background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#nav > li li { background: transparent none; }
#nav > li li a { color: #444; }
#nav > li li:hover { background:#eee; }
#nav > li:first-child {
	border-right: 1px solid #777;
	border-radius: 8px 0 0 8px;
}
#nav > li + li {
	border-left: 1px solid #aaa;
	border-right: 1px solid #777;
}
#nav > li:last-child {
	border-right: 0;
	border-left: 1px solid #aaa;
	border-radius: 0 8px 8px 0 ;
}
#nav > li:hover {
	background-color: #999;
	background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#nav ul {
	position: absolute;
	top: 2em; left: 0;
	max-height:0em;	
	margin: 0; padding: 0;
	background-color: #ddd;
	background-image: linear-gradient(#fff,#ddd);
	overflow: hidden;
	transition: 1s max-height 0.3s;
	border-radius: 0 0 8px 8px;
}
/* ici on change la valeur de max-height au :hover */
#nav > li:hover ul {
	/* à adapter, le minimum est le meilleur mais voyez large 😉 */
	max-height: 22em;
}