JSFiddle - React, Tailwind, and code Playground

HTML

<div class="prices">
	<div class="open">Район<span class="expand"></span></div>
	<ul class="list">
        <li>Тестовый район имени222</li>
        <li>Тестовый район имени222</li>        
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>
        <li>Тестовый район имени</li>        
    </ul>
</div>

CSS

.prices { width: 140px;  margin: 0px 10px; background: #fff; border: 1px solid #C8B5A1; cursor: default; z-index: 9999;position: relative; font-size: 13px;}
.prices label{vertical-align: text-top}
.prices ul li:hover{background-color: #3696E9; color: #FFFFFF;}
.prices ul {display:none; position:absolute; list-style: none;padding: 4px 0px;width:170px; margin:0px -1px -1px; border: 1px solid #C8B5A1; overflow:hidden; background:none 0% 0% repeat scroll rgb(255, 255, 255);}
.expand {background: url(http://s018.radikal.ru/i522/1508/81/84e20b4a3468.png) no-repeat left; height: 10px; width: 10px; margin: 3px 0; float: right; cursor:default}

JavaScript

$(document).ready(function(){
$(function () {
    var $ul = $('ul');
    $(document).bind("click", function (event) {
        var $target = $(event.target),
            $open = $target.closest('.open'),
            $slidingUl;

        if ($open.length) {
            $slidingUl = $open.next();
            $slidingUl.slideToggle();
            $ul.not($slidingUl).slideUp();
            return;
        }
        if ($target.closest('li').length) {
            return;
        }
        $ul.slideUp();
    });

    $('input[type="checkbox"]').bind('change', function () {
        $(this).parents('li').toggleClass('checked');
    });
});
	
});