JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menuitems">
        <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Classifieds</a>
        </li>
        <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#">Local Talk</a>
        </li>
        <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#">Weekly Specials</a>
        </li>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Local Links</a>
        </li>
        <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Other Towns</a>

            <ul class="sub-menu">
                <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">Town 1</a>
                </li>
                <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Town 2</a>
                </li>
                <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">Town 3</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">Photo Gallery</a>
        </li>
        <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#">Contact Us</a>
        </li>
    </ul>
</div>

JavaScript

$("#menu-main-menu > li").each(function () {
    if ($("ul",this).length > 0) {
        $(this).append('<span class="drop-arow">^</span>')
    }
})