JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <img src="images/ori_12.png">
        </td>
        <td id='testable'>
            <div id='wrap'>
                <img src="images/ori_14.png">
                <div id="nav_menu">
                    <ul class="dropDown">
                        <li class="li_class">
                            <img src="images/ori_12.png">
                        </li>
                        <li class="li_class">
                            <img src="images/ori_14.png">
                        </li>
                        <li class="li_class">
                            <img src="images/ori_15.png">
                        </li>
                        <li class="li_class">
                            <img src="images/ori_16.png">
                        </li>
                    </ul>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>abc</td>
        <td>def</td>
    </tr>
</table>

CSS

#clickable_div {
    width:166px;
    background-color:#9c9c9c;
    display:block;
}
#nav_menu {
    width:166px;
    height:auto;
    background-color:#CCC;
    display: none
}
#wrap {
    width:166px;
}
.dropDown {
    margin:0px;
}

JavaScript

$('#testable  #wrap').mouseenter(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/ori_', '/hover_');
     $('#nav_menu').stop(true, true).slideDown();
 }).mouseleave(function (e) {
     var anc = $(this).children('img').get(0);
     anc.src = anc.src.replace('/hover_', '/ori_');
     $('#nav_menu').stop(true, true).slideUp();
 });

 $('#nav_menu li  img').mouseenter(function (e) {
     this.src = this.src.replace('/ori_', '/hover_');
 }).mouseleave(function (e) {
     e.stopImmediatePropagation();
     this.src = this.src.replace('/hover_', '/ori_');
 });