Bandierine

#flags {
       position:fixed;
       top:-10px;      
       left:100px;
       text-align:center;
       text-transform:uppercase
       color:#000000;      
       font-size:8px;
       letter-spacing:1px;
       z-index:2147483607;
       font-family:calibri;}
     
 
   #flag1 {
       border:solid 6px #74EF83;        /* cambia il codice se vuoi cambiare il colore */
       border-bottom:solid 6px transparent;  
       padding-top:20px;
       width:0px;        
       height:20px;      
       position:absolute;
       -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}

       #flag1:hover {
           height:180px;}    
     
       #upd1 {
       position:absolute;
       width:110px;
       height:200px
       padding:10px;
       padding-top:60px;  
       top:-270px;  
       margin-left:6px
       opacity:0;
       overflow:hidden;
       -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}

       #flag1:hover #upd1{
           top:0px;
           opacity:1;}


  #flag2 {
       border:solid 6px #0CC522;    /* cambia il codice se vuoi cambiare il colore */
       margin-left:20px;
       position:absolute;
       border-bottom:solid 6px transparent;
       padding-top:20px;
       width:0px;
       height:20px;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}
     
       #flag2:hover {
           height:180px;}
     
       #upd2 {
       position:absolute;
       width:110px;
       padding:10px;
       padding-top:60px;
       height:200px;      
       top:-270px
       overflow:hidden;
       margin-left:6px;
       opacity:0;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}
     
       #flag2:hover #upd2{
           top:0px;
           opacity:1;}


  #flag3 {
       border:solid 6px #0AAA1C;     /* cambia il codice se vuoi cambiare il colore */
       position:absolute;
       margin-left:40px;
       border-bottom:solid 6px transparent;
       padding-top:20px;
       height:20px;
       width:0px;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}

       #flag3:hover {
           height:180px;}
     
       #upd3 {
       position:absolute;
       width:110px;
       padding:10px;
       padding-top:60px;
       height:200px;      
       top:-270px;    
       overflow:hidden;
       margin-left:6px;
       opacity:0;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}
     
       #flag3:hover #upd3{
           top:0px;
           opacity:1;}


  #flag4 {
       border:solid 6px #078316;     /* cambia il codice se vuoi cambiare il colore */
       position:absolute;
       margin-left:60px;
       border-bottom:solid 6px transparent;
       padding-top:20px;
       height:20px;
       width:0px;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}

       #flag4:hover {
           height:180px;}
     
       #upd4 {
       position:absolute;
       width:110px;
       padding:10px;
       padding-top:60px;
       height:200px;      
       top:-270px;    
       overflow:hidden;
       margin-left:6px;
       opacity:0;
   -moz-transition:all 0.7s ease-out;
-webkit-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;}
     
       #flag3:hover #upd3{
           top:0px;
           opacity:1;}

<div id="flags">
<div id="flag1"><div id="upd1">

scrivi qui per la primaflag

</div></div>

<div id="flag2"><div id="upd2">

scrivi qui per la seconda

</div></div>

<div id="flag3"><div id="upd3">

scrivi qui per la terza

</div></div>

<div id="flag4"><div id="upd4">

scrivi qui per la quarta

</div></div>

</div>