JSFiddle - React, Tailwind, and code Playground

HTML

<div class="side-container">
<aside class="side-nav">
    <li class="cat-item cat-item-5 current-cat-parent"><a title="Accessories" href="http://localhost/lifearts/category/products/accessories/">Accessories</a>
<ul class="children">
    <li class="cat-item cat-item-11 current-cat"><a title="View all posts filed under Baby Bib" href="http://localhost/lifearts/category/products/accessories/baby-bib/">Baby Bib</a>
</li>
</ul>
</li>
    <li class="cat-item cat-item-6"><a title="View all posts filed under Lifestyle Products" href="http://localhost/lifearts/category/products/lifestyle-products/">Lifestyle Products</a>
<ul class="children">
    <li class="cat-item cat-item-9"><a title="View all posts filed under Makeup Bag" href="http://localhost/lifearts/category/products/lifestyle-products/makeup-bag/">Makeup Bag</a>
</li>
    <li class="cat-item cat-item-10"><a title="View all posts filed under Shopping Bag" href="http://localhost/lifearts/category/products/lifestyle-products/shopping-bag/">Shopping Bag</a>
</li>
</ul>
</li>
 </aside>
</div>

CSS

ul.side-nav { display: block; list-style: none; margin: 0; padding: 17px 0; }
ul.side-nav li { display: block; list-style: none; }


.children{
  width: 200px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ccc;
}

ul.side-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 220px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }

ul.side-nav li {
  position: relative;
  }

.side-nav li ul {
  position: absolute;
  left: 199px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul.side-nav li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul.side-nav li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul.side-nav li a { padding: 2px 5px; } /* Sub Menu Styles */

ul.side-nav li:hover ul.children, ul.side-nav li.over ul.children { display: block; } /* The magic */

/* ASIDE !NAV */