/* partie positionnement et déco */  
  @media only screen and (min-width:950px) {
    #menu a {   
        display:block;   
        color: #fff;   
        text-decoration:none;  
    }  
    #menu > li,  
    #menu > li li {  
        position: relative;  
        display:inline-block;  
        width: 160px;  
        padding: 6px 6px;  
        background-color: #777;  
        background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
        z-index: 2;
    }  
    #menu > li li { background: transparent none; }  
    #menu > li li a {  color: #2a2a25; }  /* couleur de l ecriture dans le deroulant */
    #menu > li li:hover { background:#b7b9af;}  /* couleur de la ligne survolee dans le deroulant */
 
    #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:grey;  /*couleur de l onglet qui descend en couleur pure */
    background-image: linear-gradient(#eeeeec,#b4b5b0); /*couleur de l onglet qui descend en degrade */
        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:13em;  
    } 
 }
  
 @media screen and (min-width: 550px) and (max-width: 950px){
     
    #menu a {   
        display:block;   
        color: #fff;   
        text-decoration:none;  
    }  
    #menu > li,  
    #menu > li li {  
        position: relative;  
        display:inline-block;  
        width: 80px;  
        padding: 3px 3px;  
        background-color: #777;  
        background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
        z-index: 2;
    }  
    #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: 0.5em; 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:8em;  
    } 
 }