JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vert_nav_area">
		<ul class="navbar1">
	 		<li><a href="#">Услуги адвоката</a>
          <ul>
                <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>
    </ul>
</div>

CSS

@charset "utf-8";

body {
	margin:0px;
	padding:0px;	
}

.vert_nav_area {
	width:140px;
	float:left;
}

.navbar1 {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}

.navbar1, .navbar1 li ul {
	list-style-type: none;
	padding:0px;
	width: 140px;
}
	
      
.navbar1 li {
    border-left: 10px solid #666;
    border-bottom: 1px solid #666;
    	position:relative;
}
      
.navbar1 li a {
	  background-color: #949494;
    color: #fff;
    padding: 5px;
    text-decoration: none;
    border-left: 5px solid #CCC;
    display: block;
}

.navbar1 li a:hover {
	background-color: #666;
	border-left-color: #f90;
}

.navbar1 li ul{
	display: none;


}

.navbar1 li:hover ul { display: block; }

.navbar1 li ul li {
	display: block;
  	position:absolut;
}

.navbar1 li ul li a{
	background-color: #949494;
	color: #fff;
	padding: 5px;
	text-decoration: none;
	border-left: 5px solid #CCC;
}

.navbar1 li ul li a:hover {
	background-color: #666;
	border-left-color: #f90;
}

.clear {clear:both;}