JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="wrapper">
    <navigation role="navigation" class="primary-nav">
        <ul role="menubar">
            <li role="presentation">
               <a role="menu-item" href="#" title="First Link">First Link</a>
            </li>
            <li role="presentation" class="sub-container"> <a role="menu-item" aria-haspopup="true" href="#" title="Second Link">Second Link</a>
                <ul role="menu">
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 1">Sub Item 1</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 2">Sub Item 2</a>
                    </li>
                    <li role="presentation"> <a role="menu-item" href="#" title="Sub Menu Item 3">Sub Item 3</a>
                    </li>
                </ul>
            </li>
            <li role="presentation">
                <a role="menu-item" href="#" title="Third Link">Third Link</a>

            </li>
        </ul>
    </navigation>
</div>

CSS

A {
    text-decoration: none;
}
A:HOVER {
    color: blue;
}
.wrapper {
    width: 90%;
    display: block;
}
.primary-nav {
    display: block;
    margin: 0px auto;
    width: 100%;
    padding: 0px;
}
.primary-nav UL {
     background-color: #ababcd;
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    text-indent: 0px;
}
.primary-nav > UL {
    display: inline;
    border: solid 1px #000000;
    text-indent: 0px;
    float: left;
    height: 24px;
    margin: 0px;
    width: 100%;
    list-style-type: none;
    border-collapse: collapse;
}
.primary-nav LI {
    max-width: 150px;
    text-align: center;
}
.primary-nav > UL LI {
    display: inline;
    float: left;
    padding: 0px 3px 0px 3px;
    width: 32%;
    line-height: 24px;
    vertical-align: top;
    margin-top: 0px;
    text-align: center;
}
.primary-nav > UL LI UL {
    display: none;
    width: 100%;
}
.primary-nav > UL LI.sub-container:HOVER UL {
    display: inline-block;
    float: left;
    margin-left: 0px;
    clear: both;
    border: inset 1px #898989;
    box-shadow: 2px 2px 4px #000000;
}
.primary-nav > UL LI.sub-container:HOVER UL LI {
    margin-top: 2px;
    text-align: left;
    clear: both;
    width: 100%;
    padding: 0px;
}
.primary-nav LI A:HOVER {
    background-color: #cdcdef;
}
.primary-nav LI A {
    display: block;
}
.primary-nav > UL LI.sub-container:HOVER UL LI A {
    padding: 1px 3px;
    margin: 0px 3px;
}