<div class="list-choice">
  <div class="list-choice-title">Month</div>
  <div class="list-choice-objects">
    <label>
      <input type="radio" name="month"/>                         <span>January</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>February</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>March</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>April</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>May</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>June</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>July</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>September</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>October</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>November</span>
    </label>
    <label>
      <input type="radio" name="month"/>                         <span>December</span>
    </label>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Raleway);
body{
  font-family: 'Raleway', sans-serif;
  background:#3E4651;
}
.list-choice{
  width:300px;
  margin:1em auto;
  position: relative;
  cursor: pointer;  
}
.list-choice input[type="radio"]{
  position:absolute;
  left:-9999px;
}

.list-choice-title {
width: 100%;
display: block;
background: #D8D8D8;
text-align: center;
padding: 0.55em 1em;
box-sizing: border-box;
color: #FFF;
text-shadow: 0 1px 0 #CACACA;
border-radius: 0.2em;
}
.list-choice:hover .list-choice-title {
border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
  border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] + span {
color: #FFF;
background: #D8D8D8;
padding: 0.55em 1em;
display: block;
text-align: center;
box-sizing: border-box;
cursor: pointer;
width: 100%;
}
.list-choice-objects {
position: absolute;
top: 0;
padding-top: 2.1em;
box-sizing: border-box;
width: 100%;
overflow: hidden;
max-height: 0;
transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects  input[type="radio"] + span {
position: relative;
top: 0;
transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] + span:hover {
background:#BBB;
}
.list-choice:hover input[type="radio"]:checked + span:hover {
background:#74D68E;
}
.list-choice input[type="radio"]:checked + span {
background: #74D68E;
position: absolute;
top: 0em;
border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked + span {
border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked + span{
  border-radius:0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
max-height: 540px;
}