JSFiddle - React, Tailwind, and code Playground

by Brenton Strine

HTML

<h2>
    <span class="text">Add To</span>
    <div class="drop_down">
        <ul class="add_to">
            <li class="">
                <div class="header">Add To</div>
                <ul class="column_1">
                    <li>
                        <ul>
                            <li><a href="#director">Director</a></li>
                            <li><a href="#writer">Writers</a></li>
                            <li><a href="#producer">Producers</a></li>
                            <li><a href="#miscellaneous">Miscellaneous Crew</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</h2>

CSS

.article .article-header h2 {
    font-weight:700
}
h2,.h2 {
    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size:18px;
    font-weight:700
}
#filmmakers .article-header .drop_down {
    left:185px;
    position:absolute;
    top:6px
}
.drop_down {
    position:relative;z-index:101}
.single_section_table .section_header,.multi_section_table .section_header,.single_section_table ul,.multi_section_table ul {
    padding-left:10px;
    padding-right:10px
}
ol,ul {
    list-style:none
}
.drop_down>ul>li {
    float:left;margin:0;position:relative
}
.single_section_table .section_header,.multi_section_table .section_header,.single_section_table li,.multi_section_table li {clear:both;zoom:1}
.drop_down>ul.jump_to .header {
    -moz-border-radius-bottomleft:4px;
    -moz-border-radius-bottomright:4px;
    -moz-border-radius-topleft:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-radius-bottom-left:4px;
    -webkit-border-radius-bottom-right:4px;
    -webkit-border-radius-top-left:4px;
    -webkit-border-radius-top-right:4px;
    background:#f6f6f6 url(https://images-na.ssl-images-amazon.com/images/G/01/IMDbPro/images/sprites-3644436986._V_.png) 100% -1419px no-repeat;
    border:1px solid #999;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px 10px;
    width:136px
}
.drop_down>ul>li .header {
    background:url(https://images-na.ssl-images-amazon.com/images/G/01/IMDbPro/images/sprites-3644436986._V_.png) 100% -322px no-repeat;
    border-left:1px solid transparent;
    border-right:1px solid transparent;
    border-top:1px solid transparent;
    color:#333;cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:700;
    padding:6px 21px 6px 10px;
    position:relative;
    z-index:101
}
.drop_down>ul>li ul li {
    margin:0
}
.drop_down>ul>li ul {
    -moz-box-shadow:0 1px 3px 0...

JavaScript

$(".drop_down").on("mouseover", ".add_to", function(){
       $(".add_to li").addClass("hover");
}).on("mouseout", ".add_to", function{
       $(".add_to li).removeClass("hover");

});