Как сделать нормальное мега меню jquery?

Делаю мега меню и получилась ересь: результат работы и проблему можно увидеть тут: sanahunt.site Блоки перекрывают друг друга и не исчезают как нужно.

jQuery:

jQuery(function($){
      $( "#menu-item-258" ).hover(
        function() {
          $('#mega-menu-box').css('opacity' , '1');
          $('#mega-menu-box').css('visibility' , 'visible');
          $('#mega-menu-box').addClass('opened-menu');
        }
      );
      $("#mega-menu-box").mouseover(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      });
      $('#menu-item-254').hover(
        function(){
          $('#mega-menu-box-woman').css('opacity' , '1');
          $('#mega-menu-box-woman').css('visibility' , 'visible');
          $('#mega-menu-box-woman').addClass('opened-menu');
      });
      $("#mega-menu-box-woman").mouseover(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      });     
      $('#menu-item-255').hover(
        function(){
          $('#mega-menu-box-man').css('opacity' , '1');
          $('#mega-menu-box-man').css('visibility' , 'visible');
          $('#mega-menu-box-man').addClass('opened-menu');
      });

      $("#mega-menu-box-man").mouseover(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      }); 

      $('#menu-item-259').hover(
        function(){
          $('#mega-menu-box-shoes').css('opacity' , '1');
          $('#mega-menu-box-shoes').css('visibility' , 'visible');
          $('#mega-menu-box-shoes').addClass('opened-menu');
      });
      $("#mega-menu-box-shoes").mouseover(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      }); 

      $('#menu-item-257').hover(
        function(){
          $('#mega-menu-box-brands').css('opacity' , '1');
          $('#mega-menu-box-brands').css('visibility' , 'visible');
          $('#mega-menu-box-brands').addClass('opened-menu');
      });
      $("#mega-menu-box-brands").mouseover(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      }); 
      $('#menu-item-256').hover(
        function(){
          $('#mega-menu-box-vision').css('opacity' , '1');
          $('#mega-menu-box-vision').css('visibility' , 'visible');
          $('#mega-menu-box-vision').addClass('opened-menu');
      });
      $("#mega-menu-box-vision").mouseleave(
        function() {
          $(this).css('opacity' , '0');
          $(this).css('visibility' , 'hidden');
      }); 
    });

Выпадающие блоки подключаю при помощи actions wp:

function view_mega_menu() {
  get_template_part('includes/mega_menu');
  get_template_part('nav/woman');
  get_template_part('nav/man');
  get_template_part('nav/shoes');
  get_template_part('nav/brands');
  get_template_part('nav/vision');
  get_template_part('nav/beauty');
}
add_action('mega-menu' , 'view_mega_menu');

Разметка каждого блока:

<div id="mega-menu-box-man">
    <div class="row">
        <div class="col-md-2">
            <div class="inside-menu">
                <span><b>Одежда</b></span>
                <ul class="new-products-beauty">
                    <li><a href="#">Пиджаки</a></li>
                    <li><a href="#">Рубашки</a></li>
                    <li><a href="#">Брюки</a></li>
                    <li><a href="#">Жилеты</a></li>
                    <li><a href="#">Футболки</a></li>
                    <li><a href="#">Джинсовая одежда</a></li>
                    <li><a href="#">Костюмы</a></li>
                    <li><a href="#">Кожаная одежда</a></li>
                    <li><a href="#">Трикотажная одежда</a></li>
                    <li><a href="#">Пляжная одежда</a></li>
                    <li><a href="#">Верхняя одежда</a></li>
                    <li><a href="#">Спортивная одежда</a></li>
                    <li><a href="#">Кожаная верхняя одежда</a></li>
                </ul>
            </div>      
        </div>
        <div class="col-md-2">
            <div class="inside-menu">
                <span><b>ОБУВЬ</b></span>
                <ul class="new-products-beauty">
                    <li><a href="#">Сандалии</a></li>
                    <li><a href="#">Галоши</a></li>
                    <li><a href="#">Эспадрильи</a></li>
                    <li><a href="#">Туфли</a></li>
                    <li><a href="#">Мокасины</a></li>
                    <li><a href="#">Слиперы</a></li>
                    <li><a href="#">Кеды и кроссовки</a></li>
                    <li><a href="#">Шлепанцы</a></li>
                    <li><a href="#">Обувь из экзотической кожи</a></li>
                    <li><a href="#">Аксессуары для обуви</a></li>
                </ul>
                <span><b>СУМКИ</b></span>
                <ul class="new-products-beauty">                    
                    <li><a href="#">Барсетки</a></li>
                    <li><a href="#">Несессеры</a></li>
                    <li><a href="#">Папки</a></li>
                    <li><a href="#">Рюкзаки</a></li>
                    <li><a href="#">Портфели</a></li>
                    <li><a href="#">Сумки из экзотической кожи</a></li>
                    <li><a href="#">Сумки дорожные</a></li>
                </ul>   
            </div>
        </div>
        <div class="col-md-2">
            <div class="inside-menu">
                <span><b>АКСЕССУАРЫ</b></span>
                <ul class="new-products-beauty">
                    <li><a href="#">Галстуки и платки</a></li>
                    <li><a href="#">Украшения</a></li>
                    <li><a href="#">Очки</a></li>
                    <li><a href="#">Ремни</a></li>
                    <li><a href="#">Портмоне</a></li>
                    <li><a href="#">Головные уборы</a></li>
                    <li><a href="#">Перчатки</a></li>
                    <li><a href="#">Другие аксессуары</a></li>
                </ul>
                <span><b>БЕЛЬЕ</b></span>
                <ul class="new-products-beauty">
                    <li><a href="#">Майки</a></li>
                    <li><a href="#">Футболки</a></li>
                    <li><a href="#">Трусы</a></li>
                    <li><a href="#">Халаты</a></li>
                    <li><a href="#">Пижамы</a></li>
                    <li><a href="#">Носки</a></li>
                    <li><a href="#">Гольфы</a></li>
                    <li><a href="#">Подследники</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-2">
            <div class="inside-menu">
                <span><b>БРЕНДЫ</b></span>
                <ul class="new-products-beauty">
                <li><a href="#">A.Testoni</a></li>
                <li><a href="#">Balmain</a></li>
                <li><a href="#">Brunello Cucinelli</a></li>
                <li><a href="#">Cortigiani</a></li>
                <li><a href="#">Etro</a></li>
                <li><a href="#">Fendi</a></li>
                <li><a href="#">Kiton</a></li>
                <li><a href="#">Maison Margiela</a></li>
                <li><a href="#">Neil Barrett</a></li>
                <li><a href="#">Orlebar Brown</a></li>
                <li><a href="#">Philipp Plein</a></li>
                <li><a href="#">Prada</a></li>
                <li><a href="#">Premiata</a></li>
                <li><a href="#">Valentino</a></li>
                <li><a href="#">Zilli</a></li>
                </ul>
                <span><b>GIFTS</b></span>
                <span><b>Must-have</b></span>
                <span><b>Эксклюзивно в Sanahunt</b></span>
                <span><b>NEW DESIGNER</b></span>
            </div>
        </div>
        <div class="col-md-3">
            <div style="" class="menu-prodcut-wrapp">
                <center>
                <span style="font: 24px CharisSIL;">Выбор SANAHUNT</span>
                    <div style="margin-top: 50px;">
                        <?php echo do_shortcode('[slide-anything id="10918"]') ?>
                    </div>  
                </center>
            </div>
        </div>
    </div>  
</div>