Expandable menu

by Aleksey Karagodnikov

HTML

<script src="//fonts.googleapis.com/css?family=Roboto:400,500&amp;subset=latin,cyrillic"></script>
<div class="left-menu">
    <div class="root-line root-header">
        <div class="root-title">Подбор по характеристикам</div>
    </div>
    <div class="root-line">
        <div class="root-item">
            <div class="root-item-title">Цвет плафона</div>
        </div>
    </div>
    <div class="root-line">
        <div class="root-item">
            <div class="root-item-title">Материал корпус</div>
        </div>
    </div>
    <div class="root-line">
        <div class="root-item expanded">
            <div class="root-item-title">Цвет основания</div>
            <div class="sub-menu">
                <div class="sub-line">
                    <div class="sub-item">
                        <div class="sub-item-title">Голубой</div>
                    </div>
                </div>
                <div class="sub-line">
                    <div class="sub-item">
                        <div class="sub-item-title">Зеркальный</div>
                    </div>
                </div>
                <div class="sub-line">
                    <div class="sub-item selected">
                        <div class="sub-item-title">Золото</div>
                    </div>
                </div>
                <div class="sub-line">
                    <div class="sub-item">
                        <div class="sub-item-title">Коричневый</div>
                    </div>
                </div>
                <div class="sub-line">
                    <div class="sub-item selected">
                        <div class="sub-item-title">Многоцветный</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="root-line">
        <div class="root-item">
            <div class="root-item-title">Материал</div>
        </div>
    </div>
    <div class="root-line">
        <div class="root-item">
            <div...

CSS

body {
    color: #424242;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}
.left-menu {
    background-color: #f9f9f9;
    border: 1px solid #ededed;
    white-space: nowrap;
}
.left-menu .root-line:nth-child(n+2),
.left-menu .root-title {    
    padding-left: 10px;
    padding-right: 10px;
}
.left-menu .root-item {    
    padding-left: 10px;
    padding-right: 14px;
}
.left-menu .root-item-title {
    padding-left: 10px;
    padding-right: 28px;
}
.left-menu .root-header {
    border-bottom: 1px solid #ededed;
    font-size: 18px;
}
.left-menu .root-line {    
    font-weight: 500;
    height: 50px;
    line-height: 50px;
}
.left-menu .root-item {
    position: relative;
}
.left-menu .root-item-title {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAH0lEQVR4AWM4psDsCcTPoNiTAcr4D8XPsAp4IWnxAgCTPxrjBqp4AQAAAABJRU5ErkJggg==') 0 50% no-repeat; 
    border-bottom: 1px solid #ededed;
    position: relative;
}
.left-menu .root-item.expanded .root-item-title {
    border-color: transparent;
    z-index: 3;
}
.left-menu .root-item .root-item-title::after {
    background-image: url('http://i.imgur.com/zyqjLye.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -56px;
    content: '';
    display: block;
    position: absolute;
    top: 18px;
    right: 0;
    height: 14px;
    width: 14px;
}
.left-menu .root-item.expanded .root-item-title::after {
    transform: rotate(180deg);
}
.sub-menu {
    background-color: #fff;
    border: 1px solid #ededed;
    padding-top: 40px;
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    z-index: 2;
}
.sub-menu .sub-item {
    padding-left: 20px;
    padding-right: 42px;
    position: relative;
}
.sub-menu .sub-item::after {
    background-image: url('http://i.imgur.com/zyqjLye.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -14px;
   ...