JSFiddle - React, Tailwind, and code Playground

by Press H

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <div class="box">
        <div class="box_area">
        </div>
        <div class="box_dropdown collapse">
            <ul>
                <li>Test</li>
            </ul>
        </div>
    </div>
</body>

CSS

.box_area {
    width: 200px;
    height: 200px;
    border: solid black 1px;
}

.box_dropdown {
    display: none;
    width: 200px;
    border: solid red 1px;
}

JavaScript

$(document).ready(function () {
    $(".box_area").hover(function(e) {
        //$(".box_dropdown").collapse("show")
        $('.box_dropdown').toggleClass('in');
    }, function(e) {
        //$(".box_dropdown").collapse("hide")
        $('.box_dropdown').toggleClass('in');
    });
})