.accordeon ul {
margin:0;
padding:0;
list-style:none;
width : 300px;
}

.accordeon ul li {
display:block;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
width : 300px;
height:30px;
background-color: #6FF;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
transition:  height 0.3s ease-in-out;
-moz-transition:  height 0.3s ease-in-out;
-webkit-transition:  height 0.3s ease-in-out;
-o-transition:  height 0.3s ease-in-out;
}

.accordeon ul li .titre {
display:block;
margin:0;
padding:10px;
height:19px;
border-top:  #f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
font-size:80%;
color:#000;
background: grey;
}

.accordeon ul li div {
margin:0;
overflow:auto;
padding:10px;
height:150px;
background: grey;
}

.accordeon  ul li:hover {
height:150px;
}

.accordeon:hover ul li .titre:hover {
color:#fff;
background:#000;
font-size:80%;
}

.accordeon ul li .titre:hover {
cursor:pointer;
}