JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<ul class="level_1">
    <li id="search" class="choice2">
        <a href="#">Search</a>
        <ul class="level_2">
            <li>
                <section class="mod_catalogfilter block">
                    <h1>product search</h1>
                    <div class="filter_group">
                        <div class="widget filter_field_product_category">
                            <h3>Search</h3>
                            <select id="ctrl_filter_field_product_category" class="select" name="product_category">
                                <option selected="selected" value="0">choose..</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </div>
                    </div>
                    <div class="search_group">
                        <form id="chr_produktsuche_search" action="" method="post">
                            <div class="search">
                                <div class="widget filter_search">
                                    <input id="ctrl_filter_search" class="text" type="text" value="" name="search">
                                    <input id="ctrl_filter_search_submit" class="submit" type="submit" value="Starten">
                                </div>
                            </div>
                        </form>
                    </div>
                </section>
            </li>
        </ul>
    </li>
</ul>
</div>

CSS

#container{
    background: yellow;
}
.level_1 {
    width: 200px;
    height: 20px;
    background: grey;
    position: relative;
}
.level_2 {
    text-indent: 100%;
    overflow: hidden;
    width: auto;
    white-space: nowrap;
    height: 0;
}
.level_2.hover2{
    text-indent: 0%;
    height:auto;
    background: #f0f0f0;
}
.level_2.hover2 input{
    display: block;
}

JavaScript

$(".choice2").mouseenter(function() {
    $(this).addClass("active").children(".level_2").addClass("hover2");
}).mouseleave(function(event) {
    console.log(event);
    if (!$("select").is(":focus")) {
        $(this).removeClass("active").children(".level_2").removeClass("hover2");
    }
});