JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

CSS

.menu {
    display: inline;
    float:left;
    width:180px;
    height:50px;
    color:#191919;
    text-align:center;
    
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
    position:relative;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:0;
    right:0;
}
.submenu {
    background-color:#cecece;
}
.submenu > li {
    list-style-type:none;
    background-color:#fff;
    color:blue;
    cursor:pointer;
}

JavaScript

$(document).ready(function () {
    $(".menu").on('mouseenter mouseleave', function () {
        $(this).find(".submenu").toggle();
   });
});