JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="menu">
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About</a>
            <ul>
                <li><a href="about_contributors.php">Contributors</a></li>
                <li><a href="about_behind.php">Behind the Exhibit</a></li>
                <li><a href="about_sponsors.php">Sponsors</a></li>
            </ul>
        </li>
        <li><a href="exhibit_intro.php">Exhibit</a>
            <ul>
                <li><a href="exhibit_intro.php">Intro</a></li>
                <li><a href="exhibit_silkroad.php">Silk Road</a></li>
                <li><a href="exhibit_western_regions.php">Western Regions</a></li>
                <li><a href="exhibit_daily_life.php">Daily Life</a></li>
                <li><a href="exhibit_burial_practices.php">Burial Practices</a></li>
                <li><a href="exhibit_relevance.php">Relevance</a></li>
            </ul>
        </li>
        <li><a href="visit.php">Visit</a>
            <ul>
                <li><a href="visit_tickets.php">Tickets</a></li>
                <li><a href="visit_specials.php">Special Offers</a></li>
                <li><a href="visit_tours.php">Tours</a></li>
                <li><a href="visit_groups.php">Groups</a></li>
            </ul>
        </li>
        <li><a href="events.php">Events</a>
            <ul>
                <li><a href="events_lectures.php">Lecture Series</a></li>
                <li><a href="events_symposium.php">Symposium</a></li>
                <li><a href="kids_and_family.php">Kids &amp; Family</a></li>
                <li><a href="events_calendar.php">Event Calendar</a></li>
            </ul>
        </li>
        <li><a href="gallery.php">Gallery</a></li>
        <li><a href="resources.php">Resources</a>
            <ul>
                <li><a href="resources_teachers.php">For Teachers</a></li>
                <li><a href="kids_and_family.php">Kids &amp; Family</a></li>
                <li><a...

CSS

/* General */
body {}
*    {padding:0; margin:0; list-style:none; border:none;}

#menu{
    position:relative;
}

#menu li{
    display:inline; 
    float: left;   
    /* Added */
    position:relative;
}

#menu li a { 
    display: block;
    margin:0 6px;
}

#menu li ul { 
    position:absolute; 
    left:0; 
    display:none;
    margin:0 -3px 0 -1px; 
    padding:0; 
    background: #000000;
    z-index: 500;
    margin-top: -4px;
    border-top: 1px black solid;
    text-align: left; 
}

#menu li ul li {
    width:116px; 
    float:left; 
    border-top:1px dotted #666666;
    display: inline;
}

#menu li ul li a {
    text-decoration:none;  
    display:block;  
    height:15px;
    padding: 8px 5px; 
    color:#efda83;
    font-size: 12px;
}

#menu li ul li a:hover {
    text-decoration:none;  
    background: #efda83;
    color: #000000;
}

JavaScript

$('#menu > li').hover(function(){       
    var showMe = $(this).find('ul');
    $(showMe).fadeIn(200);
    var src = $('img.item', this).attr('src').match(/[^\.]+/) + '_over.png';
    $('img.item', this).attr('src', src);

}, function() {
    var showMe = $(this).find('ul');
    $(showMe).fadeOut(350);
    var src = $('img.item', this).attr('src').replace('_over', '');
    $('img.item', this).attr('src', src);
});