JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
					<li>
					<a href="#" tabindex="1">Фрукты</a>
						<ul class=sub>
							<li><a href="#">Абрикос</a></li>
							<li><a href="#">Слива</a></li>
						</ul>
					</li>
					<li>
					<a href="#" tabindex="1">Овощи</a>
						<ul class=sub>
							<li><a href="#">Лук</a></li>
							<li><a href="#">Капуста</a></li>
						</ul>
					</li>
					<li>
					<a href="#" tabindex="1">Ягоды</a>
						<ul class=sub>
							<li><a href="#">Черника</a></li>
							<li><a href="#">Ежевика</a></li>
							<li><a href="#">Земляника</a></li>
							<li><a href="#">Арбуз</a></li>
						</ul>
					</li>
				</ul>

CSS

/*------------------- MENU   ---------------------*/
											ul li ul.sub{
													display:none;
														}
														ul li {padding: 5px 0px 5px 10px;
															border-bottom: 1px dotted rgb(204, 204, 204);
															
															}
	/*	Не работает в IE 7, 8   */                  	ul li ul li:last-child {border-bottom: none;}
														ul li a, ul.sub li a {
																		outline: none;
																		color:black;
																		font:bold 14px Arial;
																		text-decoration:none;
																		vertical-align:bottom;
																	/*a:active{color:inherit;}
																	a:visited{}
																	a:hover{}*/
																		}
														     ul li ul.sub li a{
																		font-size:12px;
																		}
														ul li a:hover, ul.sub li a:hover {text-decoration:underline;}
														/*ul.sub li {-moz-transition: 0.4s linear 0.4s;}*/
													
								ul {
									list-style-image: url(../images/template/square.gif); 
									list-style-position:inside;
									margin-left:0;
									padding-left:1em;
									margin-right:6%;						
									/*border:1px solid red;*/
									}
									ul li a:focus ~ .sub, 
									ul li a:active ~ .sub, 
									.sub:hover  { 
												    display:block; 
															}
								/*----------------- close MENU -----------------------*/