JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <ul id="ldd_menu" class="ldd_menu">
        <li>	<span>Filters</span>

            <div class="ldd_submenu">
                <div class="search-container">
                    <div class="search-box">
                        <div class="category-container">
                            <select name="search_cat" id="search_cat" class="hvr">
                                <option value="All">Select Category</option>
                                <option value="All">View All</option>
                                <option value="Residential">Residential</option>
                                <option value="Commercial">Commercial</option>
                            </select>
                        </div>
                    </div>
                </div>
                <?php require_once 'search_panel.php'; //searchpanel ?>
            </div>
        </li>
        <li>	<span><a style="color:#fff;" href="shortlist.php">My Shortlists</a></span>
            <!-- Increases to 510px in width-->
        </li>
        <li>	<span><a style="color:#fff;" href="mapview.php">Mapview</a></span>
            <!-- Increases to 510px in width-->
        </li>
        <li>	<span><a style="color:#fff;" href="search.php?search_cat=All&search_typ=All&search_city=1&Budget=1&BHK=1&Readiness=1">ListView</a></span>

        </li>
    </ul>
</div>

CSS

select{
    margin-left:3px;
}
ul.ldd_menu {
    margin:0px;
    padding:0;
    display:block;
    height:50px;
    background-color:#Ae2f2f;
    list-style:none;
    font-family:"Trebuchet MS", sans-serif;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #fff;
    -moz-box-shadow:0px 3px 4px #591E12;
    -webkit-box-shadow:0px 3px 4px #591E12;
    -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a {
    text-decoration:none;
}
ul.ldd_menu > li {
    float:left;
    position:relative;
}
ul.ldd_menu > li > span {
    float:left;
    color:#fff;
    background-color:#ae2f2f;
    height:50px;
    line-height:50px;
    cursor:default;
    padding:0px 20px;
    text-shadow:0px 0px 1px #fff;
    border-right:1px solid #dddddd;
    //border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu {
    position:absolute;
    top:50px;
    width:1000px;
    height: 360px;
    display:none;
    opacity:0.95;
    left:0px;
    font-size:10px;
    background: #C34328;
    border-top:1px solid #dddddd;
    -moz-box-shadow:0px 3px 4px #591E12 inset;
    -webkit-box-shadow:0px 3px 4px #591E12 inset;
    -box-shadow:0px 3px 4px #591E12 inset;
    z-index: 99999;
}
a.ldd_subfoot {
    background-color:#f0f0f0;
    color:#444;
    display:block;
    clear:both;
    padding:15px 20px;
    text-transform:uppercase;
    font-family: Arial, serif;
    font-size:12px;
    text-shadow:0px 0px 1px #fff;
    -moz-box-shadow:0px 0px 2px #777 inset;
    -webkit-box-shadow:0px 0px 2px #777 inset;
    -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul {
    list-style:none;
    float:left;
    border-left:1px solid #DF7B61;
    margin:20px 0px 10px 30px;
    padding:10px;
}
li.ldd_heading {
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color:#FFB39F;
    text-shadow:0px 0px 1px #B03E23;
    padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a {
    font-family: Arial, serif;
    font-size:10px;
    line-height:20px;
   ...

JavaScript

$(function () {
     /**
      * the menu
      */
     var $menu = $('#ldd_menu');

     /**
      * for each list element,
      * we show the submenu when hovering and
      * expand the span element (title) to 510px
      */
     $menu.children('li').each(function () {
         var $this = $(this),
             $span = $this.children('span');
         $span.data('width', $span.width());

         //cancel the events from bubbling when they fire in select or option
         $(this).find('select,option')
             .on('mouseout mouseleave mouseover mouseenter',

         function (e) {
             e.stopPropagation();
             return false;
         });
         $this.on('mouseenter', function () {
             $menu.find('.ldd_submenu')
             //prevent the submenu of $this from hiding
             .not($('div', this))
                 .stop(true, true).hide();
             $span.stop().animate({
                 'width': '100px'
             }, 300, function () {
                 $this.find('.ldd_submenu').slideDown(300);
             });
         }).on('mouseleave', function (e) {
             $this.find('.ldd_submenu').stop(true, true).hide();
             $span.stop().animate({
                 'width': $span.data('width') + 'px'
             }, 300);
         });
     });

 });