JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="" style="height: 100%;">
<div style="background-color: #ffff00;width:255px;">
    <ul class="nav" style="height: 100%;">
        <li class="li1">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio2,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images sprite2">

                    </div>
                </div>
                <div class="admin_menu_cell">hostel management</div>
            </div>
            <ul style="list-style: none;" class="collapse" id="radio2">
                <li><a href="#">Information &amp; Stats</a>
                </li>
                <li><a href="#">DJ Says</a>
                </li>
                <li><a href="#">Request Line</a>
                </li>
                <li><a href="#">Timetable</a>
                </li>
                <li><a href="#">Banned Songs</a>
                </li>
            </ul>
        </li>
        <li class="li1">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio3,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images sprite3">

                    </div>
                </div>
                <div class="admin_menu_cell">User Management</div>
            </div>
            <ul style="list-style: none;" class="collapse" id="radio3">
                <li><a href="#">Information &amp; Stats</a>
                </li>
                <li><a href="#">DJ Says</a>
                </li>
                <li><a href="#">Request Line</a>
                </li>
                <li><a href="#">Timetable</a>
                </li>
                <li><a href="#">Banned Songs</a>
                </li>
            </ul>
        </li>
        <li class="li1">
            <div class="menu_bg" data-toggle="collapse" data-target="#radio4,.in">
                <div class="admin_icon_cell">
                    <div class="icon_images">
                        <i...

CSS

<style>

    .icon_images {
        display: inline-block;
        height: 32px;
        margin-left: -9px;
        margin-top: 3px;
        width: 32px;
    }
    .admin_icon_cell {
        background-color: rgba(149, 149, 149, 0.6);
        background-position: right center;
        background-repeat: no-repeat;
        display: table-cell;
        height: 46px;
        text-align: center;
        vertical-align: middle;
        width: 68px;
    }
    .admin_menu_cell {
        background-color: rgb(205, 205, 205);
        color: #333333;
        display: table-cell;
        font-family: "Arial";
        font-size: 11px;
        font-weight: bold;
        padding-left: 10px;
        vertical-align: middle;
        width: 150px;
    }
    .menu_bg {
        border: 2px solid transparent;
        cursor: pointer;
        font-size: 94%;
        margin-left: 3px;
        margin-top: 15px;
    }
</style>

JavaScript

$('.li1').hover(function () {

            var child1 = $("div", this);
            var child2 = $("ul", this);
            // child1.removeClass('collapsed');
            child2.removeClass('collapse');
            var thisdiv = $(child1).attr("data-target");
            $(thisdiv).collapse("show");
            child2.addClass('in');
        }, function () {
            var child1 = $("div", this);
            var child2 = $("ul", this);
            //child1.addClass('collapsed');
            //child2.removeClass('in');
            var thisdiv = $(child1).attr("data-target");
            $(thisdiv).collapse('hide');
            //child2.addClass('collapse');
        });