JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="advanced-cats">
    <div class="row">
        <div class="supercat-list">
            <ul>
                <li>Learning</li>
                <li class="active">Teams</li>
                <li>Resources</li>
            </ul>
        </div>
        <div class="location-filter">
            <label >My Location</label>
                <ul>
                    <li>All</li>
                    <li>Portland, OR</li>
                    <li>Grand Rapids, MI</li>
                </ul>
         
        </div>
    </div>
    <div class="row">
        <div class="current-supercat-label">
            You are in <b>Teams</b>
        </div>
        <div class="subcat-selector">
            <label >Pick a Subject</label>
            <ul>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
                <li>Test</li>
            </ul>
        </div>
    </div>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.advanced-cats {
    font-family:sans-serif;
    
    .row {
        padding: 0;
        
        &:first-child {
                border-bottom: 1px solid #999;
                margin-bottom: 15px;;
            }
            div {   
                display:inline-block;
            }
    }
    div.supercat-list {
        ul {
            margin: 0;
            padding: 0;
            
            li {
                display:inline-block;
                padding: 15px 32px;
                margin: 0;
                color: #999;
                border-top: 1px solid white;
                &.active {
                    background: #f7f7f7; 
                    box-shadow: 0 1px 0 #f7f7f7;
                    border-right: 1px solid #999;
                    border-left: 1px solid #999;
                    border-top: 1px solid #999;
                }
            }
            
         
        }
    }
    
    .location-filter {
        background:orange;
        box-shadow: 0 1px 0 orange, 0 -1px 0 orange;
        color:white;
        width: 140px;
        padding: 0;
        margin: 0;
        position:relative;
        label {

            padding: 15px;
            width: 140px;
            font-weight: 500;
            position:relative;
            display:block;
            margin: 0;
        }
        ul {
            
                display: inline-block;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                max-width: 100%;
                background:orange;
              
                padding: 0;
                margin: 0;
      
                li {
                    padding: 10px;
                    display: inline-block;
                    font-weight: 200;
                    max-width: 100%;
                    /* overflow:hidden; */
                    border-top: 1px solid...

JavaScript

$('.subcat-selector, .location-filter').hover(function () {
    $(this).find('ul li').stop(true,true).slideDown(300);
}, function () {
    $(this).find('ul li').stop(true,true).slideUp(300)
})