JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<ul id="posiNav">	<a><li>
		Home</li></a>
	<a><li>
		Overview</li></a>
 <a><img class="arrow" id="ksArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png"></a><a><li>
		KS Series</li></a>

    <ul class="navDrop" id="ksDrop">
<a><li>KS6700</li></a>

<a><li>KS7200</li></a>

<a><li>KS7500</li></a>

<a><li>KS7700</li></a>

    </ul>	<a><img class="arrow" id="txArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png"></a><a><li>
		TX Series</li></a>

    <ul class="navDrop" id="txDrop">
<a><li>TX3100</li></a>

<a><li>TX4200E</li></a>

    </ul>	<a><img class="arrow" id="tmArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png"></a><a><li>
		TM Series</li></a>

    <ul class="navDrop" id="tmDrop">
<a><li>TM8115</li></a>

    </ul>	<a><img class="arrow" id="cdArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png"></a><a><li>
		Cash Drawers</li></a>

    <ul class="navDrop" id="cdDrop">
<a><li>CR3110</li></a>

<a><li>CR6000</li></a>

    </ul>	<a><img class="arrow" id="periphArrow" src="https://www.metsales.com/MetropolitanSales/Microsite/posiflex/images/arrow.png"></a><a><li>
		Peripherals</li></a>

    <ul class="navDrop" id="periphDrop">
<a><li>Printers</li></a>

<a><li>Cash Drawers</li></a>

<a><li>Pole Displays</li></a>

<a><li>Magnetic Stripe Readers</li></a>

    </ul>	<a><li>
		Resources</li></a>
	<a><li>
		Support</li></a>

</ul>

CSS

#posiNav {
    list-style-type: none;
    background-color: rgb(179, 35, 23);
    color: white;
    width: 150px;
    text-align: center;
}
#posiNav li {
    padding: 5px 0px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(204, 204, 204);
}
#posiNav li:hover {
    background-color: gray;
}
#ksDrop {
    display: none;
}
.navDrop {
    background: rgb(221, 220, 220);
    border-style: none;
    color: black;
    list-style-type: none;
    margin-left: 10px;
}
.arrow {
    position: absolute;
    margin-left: 53px;
    margin-top: 10px;
    width: 15px;
}

#ksDrop {
    display: none;
}
#txDrop {
    display: none;
}
#tmDrop {
    display: none;
}
#cdDrop {
    display: none;
}
#periphDrop {
    display: none;
}

JavaScript

$('.arrow').click(function () {
    var id = $(this).attr("id");
    
    
    if($(this).hasClass('rot')) {
        $(this).removeClass('rot').rotate({
            duration: 200,
            angle: 180,
            animateTo:1
      });
    } else {
        $(this).addClass('rot').rotate({
            duration: 200,
            angle: 0,
            animateTo:180});
    };

    if (id == 'ksArrow') {
        $('#ksDrop').slideToggle("slow");
    }
    if (id == 'txArrow') {
        $('#txDrop').slideToggle("slow");
    }
    if (id == 'tmArrow') {
        $('#tmDrop').slideToggle("slow");
    }
    if (id == 'cdArrow') {
        $('#cdDrop').slideToggle("slow");
    }
    if (id == 'periphArrow') {
        $('#periphDrop').slideToggle("slow");
    }
});