/* partie positionnement et déco */
#menu a { 
	display:block; 
	color: #fff; 
	text-decoration:none;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 119px;
	padding: 6px 15px;
	background-color: blue;
	background-image: linear-gradient(#aaa, #888 0%, #777 0%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
	border-right: 0px solid #777;
	border-radius: 0px 0 0 0px;
}
#menu > li + li {
	border-left: 0px solid #aaa;
	border-right: 0px solid #777;
}
#menu > li:last-child {
	border-right: 0;
	border-left: 0px solid #aaa;
	border-radius: 0 0px 0px 0 ;
}
#menu > li:hover {
	background-color: white;
	background-image: linear-gradient(#ccc, #aaa 0%, #999 0%,#bbb);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
	position: absolute;
	top: 2em; left: 0;
	text-align: left;
	max-height:0em;	
	margin: 0px; padding: 0px 60px ;
       	background-color: white;
	background-image: linear-gradient(green,yellow);
	overflow: hidden;
	-moz-transition: .1s all .3s;
	-webkit-transition: .1s all .3s;
	transition: .1s all .3s;
	border-radius: 0 0 0px 0px;
        z-index: 1000;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
	/* à adapter, le minimum est le meilleur mais voyez large 😉 */
	max-height: 500em;
	text-align: left;
}
@media screen and (max-width : 680pw){
 .menu-mobile {
    display:block;
    color:#fff;
    background-color: rgba(29, 197, 151, 0.97);
    text-align:center;
    padding: 12px 0;
 }