JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div class="sidebar col-sm-12 col-md-4">
    <div class="sidebar-padder">
        <div class="sub-nav-menu">
            <ul id="subnav">
                <li class="page_item page-item-2 page_item_has_children"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach">A Balanced Portfolio Approach</a>

                    <ul class="children">
                        <li class="page_item page-item-99"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach/the-salary-scale">The Salary Scale</a>
                        </li>
                        <li class="page_item page-item-140"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach/incentive-plan-design">Incentive Plan Design</a>
                        </li>
                        <li class="page_item page-item-97"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach/test-page-2">Long Term Incentive &amp; Equity</a>
                        </li>
                        <li class="page_item page-item-158"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach/non-qualified-deferred-compensation-retirement-plans-risk-level-low-retention-level-high">Non-Qualified Deferred Compensation Retirement Plans</a>
                        </li>
                        <li class="page_item page-item-163"><a class="subnav-item" href="http://compadv.dpdev.net/services/balanced-portfolio-approach/perks-risk-level-low-retention-level-low">Perks</a>
                        </li>
                    </ul>
                </li>
                <li class="page_item page-item-292"><a class="subnav-item" href="http://compadv.dpdev.net/services/compensation">Compensation</a>
                </li>
                <li class="page_item page-item-294"><a class="subnav-item" href="http://compadv.dpdev.net/services/linqs">LINQS+</a>
                </li>
      ...

CSS

a, a:hover {
    text-decoration:none;
}

#subnav {
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
.sub-nav-menu {
    margin-bottom: -1px;
}
.sub-nav-menu li {
    background: #85974f;
}
.sub-nav-menu li a  {
    border-bottom: 1px solid #717f43;
    padding: 15px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    font-family:'Droid Sans', Arial, Helvetica, serif;
    display: block;
    color: #fff;
}
.sub-nav-menu li a:hover {
    background: #7f8c50;
}
.sub-nav-menu a:hover {
    text-decoration: none;
}
.sub-nav-menu .current_page_item {
    background: #7f8c50;
}
.sub-nav-menu li:first-child, .sub-nav-menu li:first-child a {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.sub-nav-menu li:last-child, .sub-nav-menu li:last-child a {
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

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

#subnav a:active {
    text-decoration: none;
}
#subnav .children {
    padding: 0;
    list-style-type: none;
}
#subnav .children li a {
    padding-left: 30px;
    font-size: 13px;
}