Prueba cambios

by JuanMa

HTML

<div id="ejemplo" class="bbb">
    <p></p>
</div>
<div id="ccc" style="display:none;">
    <li>lista</li>
    <li>lista</li>
    <li>lista</li>
    <li>lista</li>
    <li>lista</li>
    <li>lista</li>
    <li>lista</li>
</div>

CSS

#ejemplo{
    width:160px;
    height:160px;
    background:orange;
    cursor:pointer;
    transition: all .3s ;
}
#ejemplo:hover{
    background: yellow;
}
#ejemplo.bbb p, #ejemplo.aaa p{
    position:relative;
    top:70px;
    left:40px;
    width:80px;
    height:10px;
    background:#fff;
    transition: all .3s ;
}
#ejemplo.aaa p{
    background:transparent;
}
#ejemplo.bbb p:before, #ejemplo.bbb p:after,#ejemplo.aaa p:before, #ejemplo.aaa p:after{
    content:"";
    position:absolute;
    top:-20px;
    left:0px;
    width:80px;
    height:10px;
    background:#fff;
    transition: all .3s ;
}
#ejemplo.bbb p:after{
    top:20px;
}
#ejemplo.aaa p:before, #ejemplo.aaa p:after{
    top:0px;
    transform: rotate(45deg);
}
#ejemplo.aaa p:after{
    transform: rotate(-45deg);
}
#ejemplo.bbb:hover p, #ejemplo:hover p:before, #ejemplo:hover p:after {
    background:#444;
}

#ccc li{
    border:1px solid #444;
    padding: 5px 10px;
    margin-top:3px;
}

JavaScript

$("#ejemplo").toggle(
function() { 
    $("#ccc").slideDown("fast").show();   
    $(this).removeClass('bbb').addClass('aaa');
}, 
function() {   
    $("#ccc").hide(); 
    $(this).removeClass('aaa').addClass('bbb');
});