Accordion Rekomendasi

Untuk jariungu.com

by xaliber

HTML

<div id="DIV_1">
	<img src="http://i.imgur.com/0GoSgb8.png" alt="Taufik Basari" id="IMG_2" />
</div>
    
    <ul class="rekomendasi">
    <li title="Direkomendasikan layak pilih oleh...">
        <img src="http://jariungu.com/img/logo_jari_100_100.png" />
    </li>
    <li title="Direkomendasikan oleh Bersih2014">
        <img src="http://bersih2014.net/sites/antikorupsi.org/files/bersih/bersih-box-64.ico" />
        <a href="" class="rekomendasi-nama">
            Bersih2014
        </a>
    </li>
    <li title="Direkomendasikan oleh Majalah Tempo">
        <img src="http://a4.mzstatic.com/us/r30/Purple/v4/28/71/11/287111f0-a6be-3e9c-9f4a-83a0d6a11a21/icon_256.png" />
        <a href="" class="rekomendasi-nama">
            Majalah Tempo
        </a>
    </li>
</ul>

CSS

#DIV_1 {
    box-shadow: rgba(14, 14, 14, 0.247059) 0px 2px 4px 1px;
    color: rgb(103, 52, 103);
    cursor: default;
    float: left;
    height: 240px;
    position: relative;
    text-decoration: none solid rgb(103, 52, 103);
    width: 180px;
    background: rgb(205, 138, 205) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 10px solid rgb(255, 255, 255);
    font: normal normal normal 14px/20.15999984741211px Helmet, Freesans, sans-serif;
    margin: 0px 30px 0px 0px;
    outline: rgb(103, 52, 103) none 0px;
    overflow: hidden;
}/*#DIV_1*/

#IMG_2 {
    color: rgb(103, 52, 103);
    cursor: default;
    display: block;
    height: 255px;
    text-decoration: none solid rgb(103, 52, 103);
    vertical-align: middle;
    width: 180px;
    border: 0px none rgb(103, 52, 103);
    font: normal normal normal 14px/20.15999984741211px Helmet, Freesans, sans-serif;
    outline: rgb(103, 52, 103) none 0px;
}/*#IMG_2*/


body { font-family:sans-serif; }
ul { margin:0; padding:0; list-style:none; }

.rekomendasi { background:#CD8ACD; overflow:hidden;
    height:30px; width:200px; font-size:12px; border-top:1px solid #fff;
    position:absolute; left: 8px; top: 236px; }
.rekomendasi li, .rekomendasi-nama { display:inline-block;
    text-decoration:none; color:#fff; cursor:pointer; }
.rekomendasi:hover li:hover .rekomendasi-nama { width: 94px; }

.rekomendasi li { margin-right:-3%; padding:4px;  }
.rekomendasi li:first-child { width:23px; cursor:help; padding:0 4px 0 2px; }
.rekomendasi li + li { border-left:1px solid #fff; }
.rekomendasi li img { width:19px; height:19px;
    vertical-align:middle; display:inline-block; }
.rekomendasi li:first-child img { width:22px;height:22px;margin-top:-2px; }
.rekomendasi li .rekomendasi-nama {
    width: 0; overflow: hidden; white-space: nowrap;
    transition: width .5s; }
/*
.rekomendasi li:first-child { background:#ccc; }
.rekomendasi li:last-child { background:#ddd; } */