JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-nav">
      <li class="1086">Parent 1</li><ul id="sub"><a href="/parent_1"><li class="1822">Child 1</li><li class="1106">Child 2</li><li class="1891">Child 3</li></a></ul><li class="1087">Parent 2</li><ul id="sub"><a href="/parent_2"><li class="1163">Child 1</li><li class="1382">Child 2</li><li class="1189">Child 3</li></a></ul><li class="1089">Parent 3</li><ul id="sub"><a href="/parent_3"><li class="1130">Child 1</li><li class="1262">Child 2</li><li class="1261">Child 3</li></a></ul>
    </ul>

CSS

ol, ul, li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
ul #sub {
	display: none;
}
#sub li {
	display: inline;
	padding: 0 5px;
}

JavaScript

$(".1086").hover(
   function() {
      $(this).css("display","none");
   },
   function() {
      $('#sub').css("display","inline");
   }
);