JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<div class="container">
    <div id="main_navigation" class="black main-menu ">
        <ul>
            <li class="main_list_item" style="border-right: none;"><a class="main_list_link" href="#" title="Home">Home</a>

            </li>
            <li class="main_list_item"><a class="parent main_list_link" href="#">Products</a>

                <ul>
                    <li><a href="#">Product 1</a>

                    </li>
                    <li><a href="#">Product 2</a>

                        <ul>
                            <li><a href="#">Product 2a</a>

                            </li>
                            <li><a href="#">Product 2b</a>

                            </li>
                            <li><a href="#">Product 2c</a> 
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="main_list_item"><a class="parent main_list_link" href="#">Locations</a>

                <ul>
                    <li><a href="#">Columbus</a>

                    </li>
                    <li><a href="#">Pickerington</a>

                    </li>
                    <li><a href="#">Dublin</a>

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

CSS

.container {
    width: 880px;
    padding: 40px;
    margin: 0 auto;
    z-index: 10;
}
#main_navigation {
    width: 880px;
    top: 20px;
    font-size: 12px;
    float: left;
    height: 50px;
    outline: none;
    margin-bottom: 80px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    min-height: 50px;
    border-bottom: 2px solid #FFF;
}
.main-menu {
    display: block;
    z-index: 22222;
    font-family:'Droid Arabic Kufi', tahoma, serif;
    letter-spacing: 0pt;
}
.main-menu ul li a, .main-menu ul li a:link, .main-menu ul li a:visited, .searchholder {
    border-bottom: 4pt solid transparent;
    padding-bottom: 10px;
    padding-top: 8px;
}
.main-menu ul {
    margin: 0;
    padding: 0px;
    list-style-type: none;
    z-index: 10000;
    position: relative;
}
.main-menu ul li {
    display: inline;
    float: left;
    z-index: 100000;
}
.main-menu ul li > ul {
    z-index: 0;
    visibility: hidden;
    display: inline;
    opacity: 0;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 50px;
    left: -30px;
    color: #FFF;
    width: 880px;
}
.main-menu ul li:hover > ul {
    display: block;
    visibility: visible;
    left: 0px;
    opacity: 1;
}
.main_list_item {
    height: 40px;
    z-index: 0;
}
.main_list_item > a.parent {
    position: relative;
}
.main_list_item > a.parent:after {
    content:"";
    position: absolute;
    left: 44%;
    top: 0px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #FFF;
}
.main-menu ul li a.main_list_link, .main-menu ul li a.main_list_link:link {
    line-height: 30px;
    text-shadow: none;
    font-size: 13px;
    text-transform: uppercase;
}
.main-menu ul li > a {
    display: block;
    text-decoration: none;
    padding: 0px 15px;
    /*border-radius:3px;*/
}
* html .main-menu ul li a {
    display: inline-block;
}
.main-menu ul li...