JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="1" class="menu">
        
<h2>Tax Legislation gdgdgdgd hdhdjdjdjdjd jdjdjdjdjdjd</h2>

        <p id="ov1" class="ov">Our legal advising company offers information on fiscal legislatio.</p>
    </li>
    <li id="2" class="menu">
         <h2>Financial Legislation</h2>

        <p id="ov2" class="ov">Our company offers consulting and legal support on financial regulations in the Republic of Moldova by examining and presenting the latest adjustments or modifications in the legislation related to accounting and financial activity of juridical persons.</p>
    </li>
    <li id="3">
         <h2>Business Legislation</h2>

        <p id="ov3" class="ov">The company is analyzing the laws and provisions of the Republic of Moldova in the sphere of business activity and offers legal advice regarding opening, functioning or liquidation of various local and international business enterprises.</p>
    </li>
    <li id="4">
         <h2>External Trade Legislation poltargeist</h2>

        <p id="ov4" class="ov">The company offers consulting and legal services in business and foreign trade activity. We analyze the legal regulations related to export and import of goods into and from the Republic of Moldova, as well as matters related to licensing of local and foreign commercial enterprises.</p>
    </li>
</ul>

CSS

.ov {
    overflow:hidden;
    display:none;
}
a.menu {
    cursor:pointer;
    color:#0033CC;
    text-decoration:underline;
    margin-bottom:10px;
}
p {
    background:white;
    width:auto;
    margin:0px;
    padding:10px;
    font-size:12px;
}
li {
    display:block;
    
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
ul {
    background: #DDE1E7;
    position:absolute;
    font-size: 16px;
    width:200px;
    margin:10px 20px;
    border: 1px solid #C7CED8;
    cursor: pointer;
    border-radius:3px;

}
h2 {
    padding: 0px 0px 0px 20px;
    text-align: left;
    text-decoration: none;
    margin-top:6px;
    color: #283653;
    font-size: 16px;
}

JavaScript

$(document).ready(function () {
    var first = 0;
    var last_id = 0;
    var id_now = 0;

    $("li").hover(

    function () {
        id_now = this.id;

        if (first != 0) {
            $("p#ov" + last_id).hide(500, function () {
                $("p#ov" + id_now).show(500);
            });
        } else {
            first = 1;
            $("p#ov" + this.id).show(500);
        }

        last_id = id_now;
    }, function () {
        $("p#ov" + this.id).hide(500);

    });
})