JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li class="menu">
        <div class="snb_wrap">
            <p class="submenu"><a href="#">1blah blah</a></p>
            <p class="submenu"><a href="#">1blah blah</a></p>
            <p class="submenu"><a href="#">1blah blah</a></p>
            <p class="submenu"><a href="#">1blah blah</a></p>
            <p class="submenu"><a href="#">1blah blah</a></p>
        </div>
        <p>menu1</p>
    </li>
    <li class="menu">
        <div class="snb_wrap">
            <p class="submenu"><a href="#">2blah blah</a></p>
            <p class="submenu"><a href="#">2blah blah</a></p>
            <p class="submenu"><a href="#">2blah blah</a></p>
            <p class="submenu"><a href="#">2blah blah</a></p>
            <p class="submenu"><a href="#">2blah blah</a></p>
        </div>
        <p>menu2</p>
    </li>
    <li class="menu">
        <div class="snb_wrap">
            <p class="submenu"><a href="#">3blah blah</a></p>
            <p class="submenu"><a href="#">3blah blah</a></p>
            <p class="submenu"><a href="#">3blah blah</a></p>
            <p class="submenu"><a href="#">3blah blah</a></p>
            <p class="submenu"><a href="#">3blah blah</a></p>
        </div>
        <p>menu3</p>
    </li>
    <li class="menu"><p>1menu4</p></li>
</ul>

CSS

ul.menu { float:left; width:200px; background:#eeeeff; }
li.menu { float:left; width:200px; }
div.snb_wrap { position:absolute; display:none; width:200px; margin:10px 0 0 150px; background:#eeffee; }
p.snb_wrap { float:left; width:200px; }

JavaScript

$(function() {
    $('ul.menu>li.menu').mouseenter(function() {
        $('ul.submenu', this).show();
    }).mouseleave(function() {
        $('ul.submenu', this).hide();
    });
});