/* 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: 110px;          
        padding: 6px 15px;  
        background-color: #777;  
        background-image: linear-gradient(#aaa, #888 50%, #777 50%,#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: 1px solid #777;  
        border-radius: 8px 0 0 8px;  
    }  
    #menu > li + li {  
        border-left: 1px solid #aaa;  
        border-right: 1px solid #777;  
    }  
    #menu > li:last-child {  
        border-right:0;  
        border-left: 1px solid #aaa;  
        border-radius: 0 8px 8px 0 ;  
    }  
    #menu > 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 */  
    #menu 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 */  
    #menu > li:hover ul {  
        /* need an adaptation, lower is better, but see it large   */  
        max-height:40em;  
    }