JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
    <nav id = "nav">
		    <ul>
				<li><a href = "#">Одежда</a>
					<ul class = "second">
						<li><a href = "#">Мужская</a></li>
						<li><a href = "#">Женская</a></li>
						<li><a href = "#">Детская</a></li>
		</ul>
				</li>
				<li><a href = "#">Электроника</a>
					<ul class = "second">
						<li><a href = "#">Телефоны</a></li>
						<li><a href = "#">Телевизоры</a></li>
						<li><a href = "#">Компьтеры</a></li>
					</ul>
				</li>
				<li><a href = "#">Мебель</a>
					<ul class = "second">
						<li><a href = "#">Диваны</a></li>
						<li><a href = "#">Столы</a></li>
						<li><a href = "#">Кровати</a></li>
					</ul>
				</li>
				<li><a href = "#">Техника</a>
					<ul class = "second">
						<li><a href = "#">Холодильники</a></li>
						<li><a href = "#">Стиральные машины</a></li>
						<li><a href = "#">Электроплиты</a></li>
					</ul>
				</li>
			</ul>
	</nav>
  </header>
</body>

CSS

#nav *{
 margin: 0;
 padding: 0;
}

header{
 height: 200px;	
 margin-top: 100px;
 font-family: Arial, Helvetica, sans-serif;
}

  
#nav ul{
	list-style: none;
}

#nav li .second{
	display: none;
	position: absolute;
	
  
  left:100%;  
 top: 0; 
 
}
   
 #nav > ul > li{
 /* float: left;*/
    width: 180px;
  position: relative;
} 

#nav > ul li a{
 display: block;
 background: #ececed;
 padding: 15px 30px 15px 40px;
 font-size: 14px;
 color: #454547;
 text-decoration: none;
 text-transform:uppercase;
 border: 1px solid #c7c8ca;
 transition: all 0.3s ease;
 }
 
 #nav li:hover .second{
	display: block;
}

#nav li a:hover{
 background: #454547;
 color: #ffffff;
 box-shadow: 1px 5px 10px -5px black;
 transition: all 0.3s ease;
}