JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
  <ul> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory">
            <div class="contentwrapper">
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            <ol>Hey</ol>
            </div>
        </div>
    </li>
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
    <li><a href="#">LinkHere</a>
        <div class="subcategory"></div>
    </li> 
</ul> 
</div>

CSS

li:hover {
    background-color: #cc2c32;
    padding: 16px .1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.subcategory {
    display: none;
    width: 1031px;
    height: 200px;
    background-color: #cc2c32;
    color: #03F;
    position: absolute;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    margin-top: 15px;
}

li:hover .subcategory {
    display: block;
}

#navbar {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #dee8ff;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: auto;
    margin-right: auto;
}

#navbar ul {
    list-style-type: none;
    color: #000;
    padding: 0px;
    *display: inline;
    *zoom: 1;
    border: 1px solid #555;
}

#navbar ul li {
    display: inline;
}

#navbar ul li a {
    padding: 0 1.5em;
    text-decoration: none;
}

ol {
    list-style-type: none;
    float: left;
    display: block;
}

.contentwrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 180px;
    width: 200px;
    background-color: inherit;
    position: relative;
    color: #2d4594;
}

a:link {
    color: #2d4594;
    text-decoration: none;
}

a:visited {
    color: #2d4594;
    text-decoration: none;
}

a:hover {
    color: #2d4594;
    text-decoration: none;
}