JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='main-menu'>
    <li><a href="#">Home</a></li>
    <li><a href="#">Pages</a></li>
    <li class='sub-item'><a href="#">_Contact Us</a></li>
    <li class='sub-item'><a href="#">_Community</a></li>
    <li class='sub-item'><a href="#">_About Me</a></li>
    <li class='sub-item'><a href="#">_Blog</a></li>
    
    <li><a href="#">DropDown </a></li>
    <li class='sub-item'><a href="#">_Sub Menu 1</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 2</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 3</a></li>
    <li class='sub-item'><a href="#">_Sub Menu 4</a></li>
    <li><a href="#">Sign Out</a></li>
</ul>

JavaScript

$('.main-menu li a').each(function() {
  var $this = $(this),
    content = $this.text();

  if (content.indexOf('_') != -1) {
    $this.parent('li').addClass('sub-item');
  }

});
$('.sub-item').wrapAll('<ul class="sub-menu"></ul>');