JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<nav id="group-subnav"> <!-- one column wide -->
        <ul>
        <li class="current"><a href="#">Services</a>
            <ul>
            <li><a href="#">Workflow Analysis</a></li>
            <li><a href="#">Technology Assessment</a></li>
            <li><a href="#">Precision Conversion</a></li>
            <li><a href="#">Intelligent Indexing</a></li>
            <li><a href="#">Simple Search and Retrieval</a></li>
            <li><a href="#">Better Forms Management</a></li>
            <li><a href="#">Effortless Distribution</a></li>
            <li><a href="#">Total Security</a></li>
            <li><a href="#">Easier Regulatory Compliance</a></li>
            <li><a href="#">Scanning</a></li>
            </ul>
        </li>
        <li><a href="#">Benefits</a>
            <ul>
            <li>Faster Storage and Retrieval</li>
            <li>Meticulous Records Management</li>
            <li>Disaster Prevention and Recovery</li>
            <li>Heightened Security</li>
            <li>Freed-up Physical Space</li>
            <li>Responsive Customer Service</li>
            </ul>
        </li>
        <li><a href="#">Get Started</a>
            <ul>
            <li>Call our Strategic Services Manager to get started.<br>
            <li><a href="mailto:">Email</a></li>
            </ul>
            
        </li>
        </ul>
    </nav>

CSS

#group-subnav {
    display: table-cell;
    vertical-align: top;
    background: #f6ca00;
    width: 159px;
    height: 100%;
}
    #group-subnav a {
        display: block;
        color: inherit;
        text-decoration: none;
    }
    #group-subnav a:hover {
    /*    text-decoration: underline;*/
    }
    #group-subnav > ul {
    }
        #group-subnav > ul > li {
            border-top: 2px solid #fff;
            font-size: 80%;
            text-shadow: 1px 1px 2px #eee;
            color: #333;
            letter-spacing: 1px;
            line-height: 1.2em;
            background: #bebebe; /* Old browsers */
        }
            #group-subnav > ul > li > a {
                padding: 6px 8px 12px;
                background: #bebebe; /* Old browsers */
                background: -moz-linear-gradient(top,  #bebebe 0%, #b3b3b3 50%, #808080 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bebebe), color-stop(50%,#b3b3b3), color-stop(100%,#808080)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  #bebebe 0%,#b3b3b3 50%,#808080 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  #bebebe 0%,#b3b3b3 50%,#808080 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  #bebebe 0%,#b3b3b3 50%,#808080 100%); /* IE10+ */
                background: linear-gradient(top,  #bebebe 0%,#b3b3b3 50%,#808080 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#808080',GradientType=0 ); /* IE6-9 */
            }
            #group-subnav > ul > li > a:after {
                content: ' +';
                float: right;
            }
            #group-subnav > ul > li.current > a:after,
            #group-subnav > ul > li:hover > a:after {
                font-size: 75%;
                content: ' \25bc';
            }
            
           ...

JavaScript

$(document).ready(function() {
    $('#group-subnav > ul > li > a').on('click', function(e) {
        e.preventDefault();
        var $li = $(this).closest('li');
        $li.find('ul').slideToggle('', function() {
            $li.toggleClass('current')
        }).end().siblings().find('ul').slideUp('', function() {
            $li.siblings().removeClass('current')
        }).end();
    });
});