JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shopmenu">
                <ul class="topcatnav">
    <ul class="catsubnav">
<li class="catitem topcat">
<a href="/categories/hosting-plans.html" title="Hosting Plans" class="catmenulink">Hosting Plans</a>
<ul class="catsubnav" style="display: none;">
<li class="catitem content">
</li><li class="catitem content">

        <div class="column">
            <h2><a href="/categories/ecommerce-hosting.html" title="eCommerce Hosting">eCommerce Hosting</a></h2>
            <p>Here you can insert your own category description</p></div></li>
<li class="catitem content">
</li><li class="catitem content">

        <div class="column">
            <h2><a href="/categories/cms-hosting.html" title="CMS Hosting">CMS Hosting</a></h2>
            <p>Here you can insert your own category description</p></div></li>
<li class="catitem content">
</li><li class="catitem content">

        <div class="column">
            <h2><a href="/categories/database-hosting.html" title="Database Hosting">Database Hosting</a></h2>
            <p>Here you can insert your own category description</p></div></li>
</ul>
</li>
<li class="catitem topcat">
<a href="/categories/housing.html" title="Housing" class="catmenulink">Housing</a>
<ul class="catsubnav" style="display: none;">
<li class="catitem content">
</li><li class="catitem content">

        <div class="column">
            <h2><a href="/categories/linux-semi-dedicated.html" title="Linux Semi-Dedicated">Linux Semi-Dedicated</a></h2>
            <p>Here you can insert your own category description</p></div></li>
<li class="catitem content">
</li><li class="catitem content">

        <div class="column">
            <h2><a href="/categories/linux-dedicated-hosting.html" title="Linux Dedicated Housing">Linux Dedicated Housing</a></h2>
            <p>Here you can insert your own category description</p></div></li>
</ul>
</li>
<li class="catitem topcat">
<a href="/categories/technical-assistance.html" title="Technical Assistance"...

CSS

#shopmenu {
    background-color: #222;
    height: 38px;
    padding-left: 6px;
}

#shopmenu .column{
    margin-left: 10px;
    margin-top: 10px;
}

#shopmenu h2{
    font-size: 14px;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

ul.topcatnav li span.subhover {
    background-position: center bottom;
    cursor: pointer;
}

ul.topcatnav li ul.catsubnav {
    list-style: none;
    position: absolute;
    left: 0;
    top: 35px;
    background: #fff;
    display: none;
    float: left;
    width: 500px;
    z-index: 10;
    margin: 0;
    padding: 0;
    
    -moz-border-radius: 0 6px 6px 6px;
    -webkit-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
}

ul.topcatnav li ul.catsubnav li {
    clear: both;
    width: 500px;
    margin: 0;
    padding: 0;
}

ul.topcatnav li a.catmenulink {
    color: #E5E5E6;
    display: block;
    text-decoration: none;
    float: left;
    padding: 8px 5px;
    font-size: 13px;
    height: 19px;
    border: 1px solid transparent;
    text-shadow: 1px 1px 0 #000000;
    text-transform: uppercase;    
}

#shopmenu .cathover{
    background-color: #fff;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    color: #666;
    border-left: 1px solid #888;
    border-right: 1px solid #888;    
    border-top: 1px solid #888;
    text-shadow: 1px 1px 0 #FFF;
}

ul.topcatnav li ul.catsubnav li a {
    float: none;
    color: #666;
    padding: 0px;
}

ul.topcatnav li {
    float: left;
    position: relative;
    margin: 0;
    padding: 0 15px 0 0;
}

.active {
    background-position: right 7px;
}

JavaScript

// Category MENU
// ########
$("ul.topcatnav li.topcat").hover(function() {

    if ($(this).find("ul.catsubnav").children().size()) {
        $(this).find('a:first').addClass("cathover");
    }
    $(this).find("ul.catsubnav").fadeToggle('fast').show();

    $(this).hover(function() {}, function() {
        $(this).parent().find("ul.catsubnav").fadeOut('fast');
        $(this).parent().find('a').removeClass("cathover");
    });

}, function() { //On Hover Out
    $(this).removeClass("subhover"); //On hover out, remove class "subhover"
});