<div class='accordion'> <ul> <li> <a href='#'>2013</a> <ul> <li> <a href='#'>January</a> </li> <li> <a href='#'>March</a> </li> <li> <a href='#'>April</a> </li> </ul> </li> </ul> <ul> <li> <a href='#'>2012</a> <ul> <li> <a href='#'>August</a> </li> <li> <a href='#'>September</a> </li> <li> <a href='#'>October</a> </li> <li> <a href='#'>November</a> </li> <li> <a href='#'>December</a> </li> </ul> </li> </ul> </div>
.accordion { font-size:13px; line-height:30px; font-weight:700; text-transform:uppercase; border:1px solid #1d1d1d; border-radius:3px; } .accordion>ul { margin:0; padding:0; } .accordion ul,.accordion li { list-style:none; } .accordion>ul>li { background:#292929; margin:0; padding:0; } .accordion>ul>li ul { transition:.3s ease-out; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; opacity:0; margin:0; padding:0; } .accordion>ul>li li { background:#333; } .accordion a { display:block; color:#ccc!important; text-align:center; text-decoration:none!important; } .accordion>ul>li>a { border-top:1px solid #353535; border-bottom:1px solid #161616; } .accordion>ul>li ul li a { height:0; transition:.3s ease-out; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; } .accordion>ul>li:hover ul li a { height:30px; } .accordion>ul>li:hover ul { opacity:1; } .accordion > ul > li li:hover { box-shadow:inset 0 1px #4077CB,inset 0 -1px #4077cb; background:#3e6db5; }