JSFiddle - React, Tailwind, and code Playground

by techappetite

HTML

<div id="content">
    Lorem ipsum amet sorem ipsem.
    <div class="dropdownMenu">
        <span class="label">Select Option</span>
        <span class="dropdownBtn"></span>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
            <li>Option 5</li>
        </ul>
    </div>
</div>

CSS

body{
    font-family:Calibri;
}
.dropdownMenu{
    border:1px solid black;
    border-radius:3px;
    padding:2px;
    padding-right:26px;
    display:inline-block;
    min-height:20px;
    position:relative;
}
.dropdownMenu .label{
    text-shadow:0px 0px 1px black;
}
.dropdownMenu .dropdownBtn {
    background-color:black;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:24px;
    background-image:url("http://www.trux.com/TRUX_images/Arrow_green_down_dropdown_16x16icon.png");
    background-repeat:no-repeat;
    background-position:center center;
}
.dropdownMenu ul {
    float:left;
    visibility:hidden;
}

JavaScript

$(document).ready(function(){
    $(".dropdownBtn").click(function(){
        $(this).siblings("ul").css("display","inline");
    });
});