JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="page-navigation">
          <ul>
                <li><a href="../../index.html" title="Home">Home</a></li>
                    <ul class="top-menu">
                        <li><a href="../../_portfolio/photography.html" onclick="return false">Photography</a>
                        <ul class="sub-menu">
                            <li><a href="../../_portfolio/_photography/bmc-himley-mini-show-2015.html">BMC Himley Mini Show 2015</a></li>
                            <li><a href="../../_portfolio/_photography/kinver-snow.html">Kinver Snow</a></li>
                            <li><a href="../../_portfolio/_photography/mini-runs-collection.html">"Mini Runs" Collection</a></li>
                            <li><a href="../../_portfolio/_photography/hofner-bass.html">Hofner Bass</a></li>
                            <li><a href="../../_portfolio/_photography/nature.html">Nature</a></li>
                            <li><a href="../../_portfolio/_photography/haynes-motor-museum.html">Haynes Motor Museum</a></li>
                            <li><a href="../../_portfolio/_photography/miscellaneous.html">Miscellaneous</a></li>
                            <li><a href="../../_portfolio/_photography/classic-mini.html">Classic Mini</a></li>
                        </ul>
                    </li>
                        <li><a href="../../_portfolio/graphic-design.html" onclick="return false">Graphic Design</a>
                        <ul class="sub-menu">
                            <li><a href="../../_portfolio/_graphic-design/story-bag-artwork.html">"Story Bag" Artwork</a></li>
                            <li><a href="../../_portfolio/_graphic-design/business-cards.html">Business Cards</a></li>
                            <li><a href="../../_portfolio/_graphic-design/logo-design.html">Logo Design</a></li>
                            <li><a href="../../_portfolio/_graphic-design/the-mexican-job.html">"The Mexican Job"</a></li>
                            <li><a...

CSS

/*navigation*/
#page-navigation
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#page-navigation ul li
{
    color: white;
    list-style: none;
    background-color: darkslategray;
    width: 9em;
    float: left;
}

li
{
    position: relative;
}

li.title
{
    display: none;   
}

li a
{
    display: block;
    color: white;
    line-height: 1.3em;
    padding: 1em;
    text-align: center;
}

li a:link
{
    text-decoration: none;
}

li a:visited
{
    text-decoration: none;
    color: white;
}

li a:hover, .top-menu > li:hover > a
{
    background-color: rgb(48,48,48);
}

li a:active
{
    background-color: dimgray;
}

ul.sub-menu
{
    width: auto;
    height: auto;
    position: absolute;
    left: -9000em;
    overflow: hidden;
}

ul.sub-menu li
{
    clear: left;
    float: none;
    margin-left: -2.5em;
    z-index: 1000;
}

.top-menu li:hover ul
{
    left: 0;
}

ul.sub-menu li a
{
    height: auto;
    border-bottom: 1px solid gray;
    padding: .4em 1em;
    background-color: dimgray;
    padding-top: 1em;
    padding-bottom: 1em;
}

ul.sub-menu li:last-child a
{
    border-bottom: none;
}

ul.sub-menu li a:hover
{
    background-color: darkslategray;
}

ul.sub-menu li a:active
{
    background-color: gray;
}

ul.top-menu
{
    padding: 0;   
}