JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div id="sidebar">
    <ul>
        <li>
            <a href="">Testing 1</a>
            <ul>
                <li><a href="#">Test One</a></li>
                <li><a href="#">Test Two</a></li>
                <li><a href="#">Test Three</a></li>
                <li><a href="#">Test Four</a></li>
                <li><a href="#">Test Five</a></li>
            </ul>
        </li>
        <li>
            <a href="">Testing 2</a>
            <ul>
                <li><a href="#">Test One</a></li>
                <li><a href="#">Test Two</a></li>
                <li><a href="#">Test Three</a></li>
                <li><a href="#">Test Four</a></li>
                <li><a href="#">Test Five</a></li>
            </ul>
        </li>
        <li>
            <a href="">Testing 2</a>
            <ul>
                <li><a href="#">Test One</a></li>
                <li><a href="#">Test Two</a></li>
                <li><a href="#">Test Three</a></li>
                <li><a href="#">Test Four</a></li>
                <li><a href="#">Test Five</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

body {
    font : .75em arial, tahoma;
}

#sidebar ul li a {
    display : block;
    background : green;
    color : white;
    padding : 10px;
    font-weight : bold;
    text-decoration : none;
    border-bottom : 1px solid white;
}

#sidebar ul ul li a {
    background : blue;
}

JavaScript

if ($('#sidebar ul').length) {
    $("#sidebar ul").accordion({
        event: "mouseover",
        active: 1,
        collapsible: false,
        autoHeight: false
    });
}