JSFiddle - React, Tailwind, and code Playground

HTML

<div id="zz17_leftMenu" class="s4-ql">
    <div class="menu vertical menu-vertical">
        <ul class="root static">
            <li class="static"><a class="static menu-item" title="Family Income Supplement" href="Family-Income-Supplement.aspx"><span class="additional-background"><span class="menu-item-text">Family Income Supplement</span></span></a></li>
            <li class="static"><a class="static menu-item" title="Child Benefit" href="Child-Benefit.aspx"><span class="additional-background"><span class="menu-item-text">Child Benefit</span></span></a>
                <ul class="static">
                    <li class="static"><a class="static menu-item" title="Child Care" href="Child-Care.aspx"><span class="additional-background"><span class="menu-item-text">Child Care</span></span></a>
                        <ul class="static">
                            <li class="static"><a class="static menu-item" title="Child Care Support" href="Child-Care-Support.aspx"><span class="additional-background"><span class="menu-item-text" style="color:red">Child Care Support</span></span></a></li>
                        </ul>
                    </li>
                    <li class="static"><a class="static menu-item" title="Child Benefit Information" href="Child-Benefit-Information.aspx"><span class="additional-background"><span class="menu-item-text">Child Benefit Information</span></span></a>
                        <ul class="static">
                            <li class="static"><a class="static menu-item" title="Benefit Information Pack" href="Benefit-InformationPack.aspx"><span class="additional-background"><span class="menu-item-text">Benefit Information Pack</span></span></a>
                                <ul class="static">
                                    <li class="static selected"><a class="static selected menu-item" title="Benefit Pack Availability" href="Benefit-Pack-Availability.aspx"><span class="additional-background"><span...

CSS

.s4-ql-top{
padding-top:5px !important;
margin-bottom:10px !important;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border-bottom:1px solid #dbddde;
}
.s4-ql ul.root > li > .menu-item,.s4-qlheader,.s4-qlheader:visited{
font-size:1.2em;
/* [ReplaceColor(themeColor:"Dark2")] */ color:#0072bc;
margin:0px;
padding:3px 4px 3px 10px;
border-width:1px 0px;
border-style:solid;
border-color:transparent;
word-wrap:break-word;
overflow-x:hidden;
}
.s4-ql ul > li > a:hover,.s4-ql ul.root > li > a:hover,.s4-qlheader:hover{
text-decoration:underline;
}
.s4-ql ul.root ul{
margin:0px 0px 20px 0px;
padding-left:0px;
}
.s4-ql ul.root ul > li > a{
padding:3px 4px 4px 10px;
border-width:1px 0px;
border-style:solid;
border-color:transparent;
/* [ReplaceColor(themeColor:"Dark1")] */ color:#3b4f65;
overflow-x:hidden;
display:block;
zoom:1;
}
.s4-ql ul.root ul > li > a:hover{
/* [ReplaceColor(themeColor:"Accent1-Darker")] */ color:#44aff6;
text-decoration:underline;
}
.s4-ql a.selected{
/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */ background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1-Medium")] */ border-color:#91cdf2 !important;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */ border-top-color:#c6e5f8 !important;
border-width:1px !important;
padding-left:9px !important;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */ color:#003759 !important;
}
.menu li.hover,.menu li.hover-off
{
position:relative;
z-index:100;
}
.menu-horizontal .menu-item-text
{
white-space:nowrap;
}
.menu-vertical .menu-item-text
{
word-wrap:break-word;
overflow:hidden;
}
.menu-horizontal ul.static
{
display:inline;
}
.menu-horizontal li.static,
.menu-horizontal a.static,
.menu-horizontal span.static
{
float:left;
}
.menu-horizontal
{
display:table;
zoom:1;
}
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal span.dynamic-children...

JavaScript

// I need to hide items that I have highlighted in red "child care support" and "child health pack"
// if there were elements under Benefit Support Pack i'd like those hidden too

// this needs to work regardless of where the selected node is in the hierarchy

// this is for SharePoint so the list structure may be quite strange...