JSFiddle - React, Tailwind, and code Playground

HTML

<div class="catalog_item">
  <p>Мебель для спальни</p>
  <div>
    <img src="http://billsupholsterynj.com/communities/5/000/001/766/635//images/9638816.png" alt""/>
    <ul>
      <li><a href="">Кровати</a>
        <ul>
          <li><a href="">Двухъярусные</a></li>
          <li><a href="">Деревянные</a></li>
          <li><a href="">Из ДСП</a></li>
          <li><a href="">Из МДФ</a></li>
          <li><a href="">Металлические</a></li>
          <li><a href="">Подиумные</a></li>
        </ul>
      </li>
      <li><a href="">Матрасы</a>
        <ul>
          <li><a href="">Безпружинные</a></li>
          <li><a href="">Пружинные</a></li>
          <li><a href="">Наматрасники</a></li>
          <li><a href="">Топперы</a></li>
          <li><a href="">Футоны</a></li>
        </ul>
      </li>
      <li><a href="">Комоды</a></li>
      <li><a href="">Подушки</a></li>
      <li><a href="">Покрывала</a></li>
      <li><a href="">Полки</a></li>
      <li><a href="">Постельное белье</a></li>
      <li><a href="">Раскладушки</a></li>
      <li><a href="">Спальни</a></li>
      <li><a href="">Трюмо и туалетные столы</a></li>
      <li><a href="">Тумбы</a></li>
      <li><a href="">Тумбы прикроватные</a></li>
      <li><a href="">Шкафы распашные</a></li>
      <li><a href="">Шкафы-купе</a></li>
    </ul>
    <div class="clear"></div>	
    <span class="open_list">Показать все</span>
  </div>
</div>

CSS

ul li{	list-style-type: none; }
a{
	text-decoration: none;
	color: #464646;
}
body{ background:#fff; }
.catalog_item:hover{
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	cursor: pointer;
	border-color: transparent
}
.catalog_item{
	height: 406px;
	width: 266px;
	float: left;
	border: 2px solid #6d87b4;
	margin: 50px 30px 0 0;
	position: relative;
}
.catalog_item>div{ margin: 18px 0 0 23px; }
.catalog_item>p{
    font: 20px RobotoBold;
    background: #fff;
    position: absolute;
    top: -11px;
    left: 23px;
    width: 220px;
    text-align: center;
}
.catalog_item div>ul{
	  margin-top: 20px;
    height: 130px;
    overflow: hidden;
}
.catalog_item div ul li{ clear: both; }
.open_list:active .catalog_item div>ul>ul, .open_list:focus .catalog_item div>ul>ul, .open_list:visited .catalog_item div>ul>ul{
	overflow: visible !important;
	max-height: auto;
}
.catalog_item ul ul{
	margin-left: 30px;
	display: none;
}
.catalog_item ul ul li{
	list-style-type: disc;
	color: #f7cac9;
}
.catalog_item div>ul>li:hover>a{ color: #f7cac9; }
.catalog_item div>ul>li:hover:before{ color: #f7cac9; }
.catalog_item div>ul>li:before {
    content:  "—";
    position: relative;
    color: #6d87b4;
}
.catalog_item div>ul>li>a{
    margin-left: 8px;
    font-size: 14px;
}
.catalog_item .open_list{
	  text-decoration: underline;
    color: #6d87b4;
}