JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <a href="javascript:" class="toggle" title="Advanced Filtering">Advanced...</a>
    <div class="advanced">
        <label>Show:</label>
        <select name="showAll">
            <option value="true">My Team</option>
            <option value="false">Mine Only</option>
        </select>
        
        <label>Show:</label>
        <select name="showAll">
            <option value="true">My Team</option>
            <option value="false">Mine Only</option>
        </select>        
    </div>
</div>

CSS

#parent {
display: block;
    z-index: 101;
    padding: 3px 5px 2px;
    margin-right: 5px;
    float: left;
    position: relative;
}

#parent:hover {
    background: #DDDDDD;
    border: 1px solid red;
    border-bottom: 0;
    padding: 2px 4px !important;
    height: 22px;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    color: #666;
    }

.advanced {
-moz-border-radius:0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;    
    left:-1px;
    position:absolute;
    top:24px;
    z-index:100;
    background: #999;
    color: #FFF;
    border: 0;
    padding: 2px 4px;
    float: none;
    width: auto;
    margin: 0;
}

.advanced:hover 
{
    background: #777;
    }