JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<nav class="u_1106951622 effect-text-color main-navigation unifiednav dmLinksMenu" role="navigation" layout-main="horizontal_nav_layout_2" layout-sub="submenu_horizontal_1" data-show-vertical-sub-items="HOVER" id="1106951622" dmle_extension="onelinksmenu" data-element-type="onelinksmenu" wr="true" icon="true" surround="true" adwords="" navigation-id="unifiedNav" data-from-nav="true" data-sub-nav="true" data-nav-structure="HORIZONTAL" data-items="-1" custom-li-class="" custom-ul-class="" custom-a-class="" custom-inner-ul-class="" custom-nested-inner-ul-class="" custom-span-class="" data-links-level="0" is-build-your-own="false">
    <ul role="menubar" class="unifiednav__container  " data-auto="navigation-pages">
        <li role="menuitem" class="unifiednav__item-wrap" data-auto="more-pages" data-depth="0">
            <a href="#" class="unifiednav__item  dmUDNavigationItem_00" target="" data-target-page-alias="">
                <span class="nav-item-text " data-link-text="Menu Item" data-auto="page-text-style">
                    Menu Item<span class="icon icon-angle-down"></span>
                </span>
            </a>
        </li>
        <li role="menuitem" aria-haspopup="true" class="unifiednav__item-wrap" data-auto="more-pages" data-depth="0">
            <a href="#" class="unifiednav__item  dmUDNavigationItem_010101436714  unifiednav__item_has-sub-nav" target="" data-target-page-alias="">
                <span class="nav-item-text " data-link-text="Menu Item 1" data-auto="page-text-style">
                    Menu Item 1<span class="icon icon-angle-down"></span>
                </span>
            </a>
            <ul role="menu" aria-expanded="false" class="unifiednav__container unifiednav__container_sub-nav" data-depth="0" data-auto="sub-pages">
                <li role="menuitem" class="unifiednav__item-wrap" data-auto="more-pages" data-depth="1">
                    <a href="#"...

JavaScript

//$('ul[data-auto="navigation-pages"]').children("li").each(function() {
    //$(this).find('ul[data-auto="sub-pages"]').find('li[data-depth="1"]').clone().appendTo('.subnavcon');
//});

$('ul[data-auto="navigation-pages"]').children("li").find('a.dmNavItemSelected').next('ul[data-depth="1"][data-auto="sub-pages"]').clone().appendTo('.subnavcon');