jQuery切换（）从下到上工作，但不是从上到下

Question

在下面的演示中，当在移动视口 <=768px 中时，我执行以下操作：

1. 单击“产品”，打开“产品”的大型菜单。
2. 向下滚动，然后单击“资源”。
3. 我预计产品的大型菜单将关闭，资源的大型菜单将打开。
4. 发生的情况是产品的大型菜单关闭，但资源的大型菜单未打开。

按照相反的顺序工作，即首先打开资源的大型菜单，然后单击“产品”关闭资源的大型菜单，然后打开产品的大型菜单（这很好用），则不存在该问题。

我考虑过某个元素是否与正确的项目重叠并阻止正确的元素被单击 - 我认为情况并非如此。

您需要点击右上角的汉堡菜单@看看会发生什么。

帮助表示赞赏。

$(document).ready(function () {
if (window.innerWidth > 768) {
    $(".mega-drop-down").hover(function() {
        $(this).find('a span').toggleClass('hover');
        $('.mega-menu').not($(this).children('.mega-menu').toggle()).hide();
        $('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
    });
}
$(".mega-drop-down").on('click', function () {
    if (window.innerWidth <= 768) { 
        $('.mega-menu').not($(this).children('.mega-menu').toggleClass('hide-block')).addClass('hide-block');
        $(this).find('a span').toggleClass('hover');
        $('.exo-menu').find('a span').not($(this).find('a span')).removeClass('hover');
    }
});
$('.toggle-menu').click(function(){
    $('.exo-menu').toggleClass('display');
    $('#mm-button-group').toggle();
});
});

.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
    z-index: 1000;
}
ul.exo-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.cabeza, ul.manos, ul.corporal {
    list-style-type: none;
    padding: 0;
}
/*.container-fluid.megamenusip {
       width: 1200px;
     }*/
.content {
    margin: 50px 100px 0px 100px;
}
.mega-menu-wrap .row {
    margin-right: 0;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}
.exo-menu {
    float: none;
    margin: auto;
    list-style: none;
    position: relative;
}
.exo-menu > li {
    display: inline-block;
    float: left;
    position: relative;
}
.exo-menu > li > a {
    color: black;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.exo-menu > li > a:hover {
    color: #23ADF8;
}
.exo-menu i {
    float: left;
    font-size: 18px;
    margin-right: 6px;
    line-height: 20px !important;
}
li.drop-down, .flyout-right, .flyout-left {
    position: relative;
}
li.drop-down:before {
    content: "f103";
    color: #fff;
    font-family: FontAwesome;
    font-style: normal;
    display: inline;
    position: absolute;
    right: 6px;
    top: 20px;
    font-size: 14px;
}
li.drop-down > ul {
    left: 0px;
    min-width: 230px;
}
.drop-down-ul {
    display: none;
}
.flyout-right > ul, .flyout-left > ul {
    top: 0;
    min-width: 230px;
    display: none;
    border-left: 1px solid #365670;
}
li.drop-down > ul > li > a, .flyout-right ul > li > a, .flyout-left ul > li > a {
    color: #fff;
    display: block;
    padding: 20px 22px;
    text-decoration: none;
    background-color: #365670;
    border-bottom: 1px dotted #547787;
    -webkit-transition: color 0.2s linear, background 0.2s linear;
    -moz-transition: color 0.2s linear, background 0.2s linear;
    -o-transition: color 0.2s linear, background 0.2s linear;
    transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul > li > a, .flyout-left ul > li > a {
    border-bottom: 1px dotted #B8C7BC;
}
.flyout-mega-wrap {
    top: 0;
    right: 0;
    left: 100%;
    width: 100%;
    display: none;
    height: 100%;
    padding: 15px;
    min-width: 742px;
}
h4.row.mega-title {
    color: #838383;
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
}
.flyout-mega ul > li > a {
    font-size: 90%;
    line-height: 25px;
    color: #fff;
    font-family: inherit;
}
.flyout-mega ul > li > a:hover, .flyout-mega ul > li > a:active, .flyout-mega ul > li > a:focus {
    text-decoration: none;
    background-color: transparent !important;
    color: #ccc !important
}
.animated.fadeIn.mega-menu {
    margin-top: 0;
}
.mega-menu {
    left: 0;
    right: 0;
    width: 100vw;
    display: none;
    position: fixed;
    padding-top: 0;
    padding-top: 10px;
}
.mega-menu-wrap {
    background-color: white;
}
.mm-mega-menu-wrap {
    box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}
h4.row.mega-title {
    color: #838383;
    margin-top: 0px;
    font-size: 15px;
    padding-bottom: 13px;
    padding-top: 23px;
}
.mega-menu ul li a {
    line-height: 25px;
    font-size: 15px;
    color: black;
    font-weight: 600;
    display: block;
}
ul.stander li a {
    padding: 3px 0px;
}
ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}
ul.description li span {
    color: #ccc;
    font-size: 85%;
}
a.view-more {
    border-radius: 1px;
    margin-top: 15px;
    background-color: #009FE1;
    padding: 2px 10px !important;
    line-height: 21px !important;
    display: inline-block !important;
}
a.view-more:hover {
    color: #fff;
    background: #0DADEF;
}
ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}
ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog {
    left: 0;
    display: none;
    color: #fefefe;
    padding-top: 15px;
    background: #547787;
    padding-bottom: 15px;
}
.Blog .blog-title {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}
.Blog .blog-des {
    color: #ccc;
    font-size: 90%;
    margin-top: 15px;
}
.Blog a.view-more {
    margin-top: 0px;
}
/*Images*/
.Images {
    left: 0;
    width: 100%;
    display: none;
    color: #fefefe;
    padding-top: 15px;
    background: #547787;
    padding-bottom: 15px;
}
.Images h4 {
    font-size: 15px;
    margin-top: 0px;
    text-transform: uppercase;
}
/*common*/
.flyout-right ul > li > a, .flyout-left ul > li > a, .flyout-mega-wrap {
    background-color: white;
}
/*hover*/
.Blog:hover, .Images:hover, .mega-menu:hover, .drop-down-ul:hover, li.flyout-left > ul:hover, li.flyout-right > ul:hover, .flyout-mega-wrap:hover, li.flyout-left a:hover + ul, li.flyout-right a:hover + ul, .blog-drop-down > a:hover + .Blog, li.drop-down > a:hover + .drop-down-ul, .images-drop-down > a:hover + .Images, .mega-drop-down a:hover + .mega-menu, li.flyout-mega > a:hover + .flyout-mega-wrap {
    display: block;
}
a.toggle-menu {
    position: absolute;
    right: 10px;
    padding: 20px;
    font-size: 27px;
    color: black;
    top: 0px;
    transform: rotate(90deg);
    margin-top: -13px;
}
.fl-node-5dafd29034e78 {
    z-index: 210 !important;
    position: relative;
}
.megamenusip, .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
    z-index: 200;
}
.circle_image02 {
    opacity: 1.0 !important;
    filter: alpha(opacity=50) !important; /* For IE8 and earlier */
}
.circle_image02:hover {
    opacity: 0.5 !important;
    filter: alpha(opacity=100) !important; /* For IE8 and earlier */
}
.mega-menu-wrap li {
    margin-bottom: 22px;
    padding-right: 30px;
}
.mm-mm-icon {
    vertical-align: top;
    margin-right: 14px;
    width: 32;
    height: 32;
}
.mm-mm-subtext {
    display: inline-block;
    margin-left: 46px;
    font-size: 13px;
}
.mega-drop-down > a > span::after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f107';
    padding-left: 5px;
}
.mega-drop-down > a > span.hover::after {
    font-family: 'Font Awesome\ 5 Free';
    content: '\f106';
}
.mega-drop-down > a > span.hover, .mega-drop-down > a:active {
    color: #23ADF8;
}
.mm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.mm-grid div:nth-of-type(2) {
    padding: 10px 10px 10px 35px;
}
.mm-mm-video {
    display: inline-block;
    background-color: white;
    border: 2px solid #EDEDED;
    margin-top: 17px;
    padding: 13px;
    border-radius: 24px;
    height: 47px;
    width: 161px;
}
.mm-mm-video:hover {
    background-color: #23ADF8;
    border-color: #23ADF8;
}
.mm-mm-video a {
    color: #23ADF8;
}
.mm-mm-video:hover a {
    color: white;
}
.mm-mm-video:hover img {
    filter: invert(42%) brightness(180%) contrast(180%);
}
.mega-drop-down a:hover + .mega-menu.hide-block {
    display: none;
}
.mm-mm-flyout {
    display: inline-block;
    width: 100%;
    font-size: 15px;
}
.animated.mega-menu {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.mega-menu ul li a:hover {
    color: #23ADF8;
}
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
.mm-grid {
    width: 400px;
    max-width: 100%;
}
h4.row.mega-title {
    padding-left: 0;
}
.row .col-md-2, .row .col-md-3, .row .col-md-4 {
    padding-left: 0;
    padding-right: 0;
}
@media (min-width: 1349px) {
    .fl-node-5dafd29034e79 {
        width: 16%;
    }
    .fl-node-g84bp2nweskf {
       width: 3%;
    }
}
@media (min-width: 1300px) {
    .mega-menu-wrap {
        width: 1280px;
        margin: auto;
    }
}
@media (max-width: 1299px) {
    .mega-menu-wrap {
        width: 100%;
    }
}
@media (min-width: 1252px) {
    .exo-menu > li > a {
        display: block;
        padding: 30px 22px 32px;
    }
}
@media (max-width: 1251px) {
    .exo-menu > li > a {padding: 30px 15px 32px;}
}
@media (max-width: 1199px) {
    .mega-menu {
        width: 100vw;
    }
}
@media (max-width: 1151px) {
    .fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {display: none;}
}
@media (max-width: 1025px) {
    .fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {display: none;}
}
@media (min-width: 992px) {
    .exo-menu > li:nth-child(1) > a {
        padding-left: 0;
    }
    .col-md-2 {
        width: 16.66666667%;
        float: left;
    }
    .col-md-3 {
        width: 25%;
        float: left;
        padding-left: 0;
    }
    .col-md-4 {
        width: 33.33333333%;
        float: left;
    }
}
@media (max-width: 991px) {
    .empty {
        display: none;
    }
}
@media (min-width: 789px) and (max-width: 800px) {
    .exo-menu > li > a {
        padding: 30px 12px 32px;
    }
}
@media (min-width: 769px) {
    .mm-grid {
        margin-bottom: 27px;
    }
    #mm-button-group {display: none;}
}
@media (min-width: 768px) {
    .mega-menu, .flyout-mega-wrap, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
        position: fixed;
        margin-top: 0;
    }
    .flyout-right > ul {
        left: 100%;
    }
    .flyout-left > ul {
        right: 100%;
    }
    .mega-menu-wrap .row {
        margin-right: 0;
        margin-left: 0;
        padding: 0 15px;
    }
}
@media (max-width: 768px) {
    .fl-builder-content .fl-node-5dafd29034e79 {
        width: calc(100vw - 130px) !important;
    }
    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 130px !important;
    }
    .fl-builder-content .fl-node-g84bp2nweskf {display: none;}
    .fl-node-5dafd2ede7f58 > .fl-module-content {
        margin-left: 0;
    }
    .exo-menu {
        min-height: 58px;
        width: 100%;
    }
    .mega-menu {
        padding: 15px;
    }    
    .animated.mega-menu {
        padding-left: 22px;
        padding-right: 22px;
        margin-left: -22px;
        margin-right: -22px;
    }
    .mm-mega-menu-wrap {
        box-shadow: none;
    }
    .mega-menu-wrap {
        background-color: transparent;   
    }
    ul.exo-menu.display {
        /*width: 100vw;*/
        left: 0;
        position: relative;
        margin-top: 25px;
        background-color: white;
        min-height: calc(100vh - 238px);
    }
    a.toggle-menu {
        right: 0;
        top: 0;
    }
    .mega-drop-down > a > span::after {
        float: right;
        padding-right: 6px;
    }
    .exo-menu.display a.toggle-menu span {
        display: none;
    }
    .exo-menu.display a.toggle-menu {
        position: absolute;
        right: 21px;
        padding: 20px 4px;
        font-size: 27px;
        margin-top: -70px;
        color: #212121;
    }
    .exo-menu.display a.toggle-menu:hover, a.toggle-menu:hover {
        color: #212121;
    }
    .exo-menu.display a.toggle-menu:before {
        display: block !important;
        font-family: 'Font Awesome\ 5 Free';
        content: '\f00d';
        transform: rotate(90deg);
        color: #B2B2B2;
        font-weight: 900;
        margin-top: 20px;
        margin-right: -48px;
    }
    .exo-menu > li > a {
        display: none;
        padding: 30px 8px 32px;
    }
    .exo-menu > li {
        margin-left: auto;
        margin-right: auto;
        border-bottom: 1px solid #EDEDED;
    }
    .exo-menu > li.mm-li-button {
        border-bottom: none;
    }
    .display.exo-menu > li {
        width: calc(100vw - 44px);
        display: block;
        float: none;
    }
    .display.exo-menu > li > a {
        display: block;
        padding: 20px 0;
        font-size: 24px;
    }
    .mega-menu, .Images, .Blog, .flyout-right > ul, .flyout-left > ul, li.drop-down > ul {
        position: relative;
    }
    .mega-menu {
        background-color: #F8F8F8;
    }
    #menu-item-1225 {
        margin-top: -5px;
    }
    .fl-builder-content .fl-node-5dafd29034e7a {
        width: 40px !important;
    }
    #see-all-features {content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');}
    #just-4-steps {content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');}
    .mega-menu.hide-block {
        display: none !important;
    }
    #mm-button-group {display: none;}
    #mm-button-group .mm-mm-button a.fl-button {
        font-family: Poppins, sans-serif;
        font-weight: 600;
        font-size: 16px;
        border: 1px solid #23ADF8 !important;
        background-color: white !important;
        background-clip: border-box;
        border-top-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 2px;
        border-left-width: 2px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        width: 100%;
        text-align: center;
        /*margin: 10px 0;*/
    }
    .fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
        border: 1px solid #EDEDED !important;
    }
    .fl-page .mm-mm-button a.fl-button span {
        color: #23ADF8 !important;
    }
    #mm-button-group {
        position: relative;
        bottom: -5px;
        list-style-type: none;
        padding-left: 0;
        width: 100%;
        background-color: white;
        padding-bottom: 24px;
    }
    #mm-button-group li {
        padding: 10px 0 0 0;
        background-color: white;
    }
    .container-fluid.megamenusip {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        position: absolute;
        left: 0;
        width: 100vw;
        min-height: 100vh;
    }
    h4.row.mega-title {padding-top: 11px;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="header-top">
  <div class="container-fluid megamenusip">
    <ul class="exo-menu">
      <li class="mega-drop-down"><a href="#"><span>Product</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Instant Digital Signage Platform</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
                  </ul>
                </div>
                <div class="col-md-2">
                  <h4 class="row mega-title">Get the Player</h4>
                  <ul class="manos">
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Player Software</a></li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <h4 class="row mega-title">What is Instant Digital Signage?</h4>
                  <div class="mm-grid">
                    <div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features"/></div>
                    <div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
                      <button class="mm-mm-video">
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Solutions</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Industries</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair &amp; Beauty</a> <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More</a> <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title">Use Cases</h4>
                  <ul class="manos">
                    <li><a href="#">Digital Menu Boards</a></li>
                    <li><a href="#">Window Signage</a></li>
                    <li><a href="#">In-Store Signage</a></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title">About Mandoe</h4>
                  <ul class="manos">
                    <li><a href="#">Enterprise</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Partner Program</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Resources</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Learn about the product</h4>
                  <ul class="cabeza">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li><a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules &amp; more.</span></li>
                  </ul>
                </div>
                <div class="col-md-2">
                  <h4 class="row mega-title">Get in Touch</h4>
                  <ul class="manos">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Support</a></li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <h4 class="row mega-title">Learn how it works</h4>
                  <div class="mm-grid">
                    <div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
                    <div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
                      <button class="mm-mm-video">
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li><a href="/pricing/software-only-pricing/">Pricing</a></li>
      <a href="#" class="toggle-menu visible-xs-block"><span>|||</span></a>
    </ul>
    <ul id="mm-button-group">
      <li class="mm-li-button" id="mm-mm-button-1">
          <div class="fl-button-wrap mm-mm-button">
            <a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Start Free Trial</span>
                    </a>
            </div>
      </li>
      <li class="mm-li-button" id="mm-mm-button-2">
          <div class="fl-button-wrap mm-mm-button">
            <a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
                            <span class="fl-button-text">Log In</span>
                    </a>
            </div>
      </li>  
    </ul>
  </div>
</div>

Answer 1

从 .mega-menu 中删除 display: none;：

.mega-menu {
      left: 0;
      right: 0;
      width: 100vw;
      /*display: none;*/
      position: fixed;
      padding-top: 0;
      padding-top: 10px;
    }

此外，使用相同的方法来切换悬停和单击处理程序的菜单。对两者使用不同的方法会使事情变得复杂。在以下演示中，我在小屏幕和宽屏幕上都使用了 .mega-menu.hide-block ：
codesandbox 上的演示

$(document).ready(function() {
  $(".mega-drop-down").hover(function() {
    if (window.innerWidth > 768) {
      showMenu(this);
    }
  });

  $(".mega-drop-down").on("click", function() {
    if (window.innerWidth <= 768) {
      showMenu(this);
    }
  });
  $(".toggle-menu").click(function() {
    $(".exo-menu").toggleClass("display");
    $("#mm-button-group").toggle();
    $(".mega-menu").addClass("hide-block");
  });
});

function showMenu(self) {
  $(".mega-menu")
    .not($(self).children(".mega-menu").toggleClass("hide-block"))
    .addClass("hide-block");
  $(self).find("a span").toggleClass("hover");
  $(".exo-menu")
    .find("a span")
    .not($(self).find("a span"))
    .removeClass("hover");
}

.fl-builder-content[data-type="header"].fl-theme-builder-header-sticky {
  z-index: 1000;
}

ul.exo-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.cabeza,
ul.manos,
ul.corporal {
  list-style-type: none;
  padding: 0;
}


/*.container-fluid.megamenusip {
       width: 1200px;
     }*/

.content {
  margin: 50px 100px 0px 100px;
}

.mega-menu-wrap .row {
  margin-right: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.exo-menu {
  float: none;
  margin: auto;
  list-style: none;
  position: relative;
}

.exo-menu>li {
  display: inline-block;
  float: left;
  position: relative;
}

.exo-menu>li>a {
  color: black;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.exo-menu>li>a:hover {
  color: #23ADF8;
}

.exo-menu i {
  float: left;
  font-size: 18px;
  margin-right: 6px;
  line-height: 20px !important;
}

li.drop-down,
.flyout-right,
.flyout-left {
  position: relative;
}

li.drop-down:before {
  content: "f103";
  color: #fff;
  font-family: FontAwesome;
  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 14px;
}

li.drop-down>ul {
  left: 0px;
  min-width: 230px;
}

.drop-down-ul {
  display: none;
}

.flyout-right>ul,
.flyout-left>ul {
  top: 0;
  min-width: 230px;
  display: none;
  border-left: 1px solid #365670;
}

li.drop-down>ul>li>a,
.flyout-right ul>li>a,
.flyout-left ul>li>a {
  color: #fff;
  display: block;
  padding: 20px 22px;
  text-decoration: none;
  background-color: #365670;
  border-bottom: 1px dotted #547787;
  -webkit-transition: color 0.2s linear, background 0.2s linear;
  -moz-transition: color 0.2s linear, background 0.2s linear;
  -o-transition: color 0.2s linear, background 0.2s linear;
  transition: color 0.2s linear, background 0.2s linear;
}

.flyout-right ul>li>a,
.flyout-left ul>li>a {
  border-bottom: 1px dotted #B8C7BC;
}

.flyout-mega-wrap {
  top: 0;
  right: 0;
  left: 100%;
  width: 100%;
  display: none;
  height: 100%;
  padding: 15px;
  min-width: 742px;
}

h4.row.mega-title {
  color: #838383;
  margin-top: 0px;
  font-size: 15px;
  padding-bottom: 13px;
}

.flyout-mega ul>li>a {
  font-size: 90%;
  line-height: 25px;
  color: #fff;
  font-family: inherit;
}

.flyout-mega ul>li>a:hover,
.flyout-mega ul>li>a:active,
.flyout-mega ul>li>a:focus {
  text-decoration: none;
  background-color: transparent !important;
  color: #ccc !important
}

.animated.fadeIn.mega-menu {
  margin-top: 0;
}

.mega-menu {
  left: 0;
  right: 0;
  width: 100vw;
  /*display: none;*/
  position: fixed;
  padding-top: 0;
  padding-top: 10px;
}

.mega-menu-wrap {
  background-color: white;
}

.mm-mega-menu-wrap {
  box-shadow: 3px 3px 10px 0 rgb(206 206 206 / 51%);
}

h4.row.mega-title {
  color: #838383;
  margin-top: 0px;
  font-size: 15px;
  padding-bottom: 13px;
  padding-top: 23px;
}

.mega-menu ul li a {
  line-height: 25px;
  font-size: 15px;
  color: black;
  font-weight: 600;
  display: block;
}

ul.stander li a {
  padding: 3px 0px;
}

ul.description li {
  padding-bottom: 12px;
  line-height: 8px;
}

ul.description li span {
  color: #ccc;
  font-size: 85%;
}

a.view-more {
  border-radius: 1px;
  margin-top: 15px;
  background-color: #009FE1;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
}

a.view-more:hover {
  color: #fff;
  background: #0DADEF;
}

ul.icon-des li a i {
  color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  text-align: center;
  background-color: #009FE1;
  line-height: 35px !important;
}

ul.icon-des li {
  width: 100%;
  display: table;
  margin-bottom: 11px;
}


/*Blog DropDown*/

.Blog {
  left: 0;
  display: none;
  color: #fefefe;
  padding-top: 15px;
  background: #547787;
  padding-bottom: 15px;
}

.Blog .blog-title {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
}

.Blog .blog-des {
  color: #ccc;
  font-size: 90%;
  margin-top: 15px;
}

.Blog a.view-more {
  margin-top: 0px;
}


/*Images*/

.Images {
  left: 0;
  width: 100%;
  display: none;
  color: #fefefe;
  padding-top: 15px;
  background: #547787;
  padding-bottom: 15px;
}

.Images h4 {
  font-size: 15px;
  margin-top: 0px;
  text-transform: uppercase;
}


/*common*/

.flyout-right ul>li>a,
.flyout-left ul>li>a,
.flyout-mega-wrap {
  background-color: white;
}


/*hover*/

.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover+ul,
li.flyout-right a:hover+ul,
.blog-drop-down>a:hover+.Blog,
li.drop-down>a:hover+.drop-down-ul,
.images-drop-down>a:hover+.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover+.flyout-mega-wrap {
  display: block;
}

a.toggle-menu {
  position: absolute;
  right: 10px;
  padding: 20px;
  font-size: 27px;
  color: black;
  top: 0px;
  transform: rotate(90deg);
  margin-top: -13px;
}

.fl-node-5dafd29034e78 {
  z-index: 210 !important;
  position: relative;
}

.megamenusip,
.mega-menu,
.Images,
.Blog,
.flyout-right>ul,
.flyout-left>ul,
li.drop-down>ul {
  z-index: 200;
}

.circle_image02 {
  opacity: 1.0 !important;
  filter: alpha(opacity=50) !important;
  /* For IE8 and earlier */
}

.circle_image02:hover {
  opacity: 0.5 !important;
  filter: alpha(opacity=100) !important;
  /* For IE8 and earlier */
}

.mega-menu-wrap li {
  margin-bottom: 22px;
  padding-right: 30px;
}

.mm-mm-icon {
  vertical-align: top;
  margin-right: 14px;
  width: 32;
  height: 32;
}

.mm-mm-subtext {
  display: inline-block;
  margin-left: 46px;
  font-size: 13px;
}

.mega-drop-down>a>span::after {
  font-family: 'Font Awesome\ 5 Free';
  content: '\f107';
  padding-left: 5px;
}

.mega-drop-down>a>span.hover::after {
  font-family: 'Font Awesome\ 5 Free';
  content: '\f106';
}

.mega-drop-down>a>span.hover,
.mega-drop-down>a:active {
  color: #23ADF8;
}

.mm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mm-grid div:nth-of-type(2) {
  padding: 10px 10px 10px 35px;
}

.mm-mm-video {
  display: inline-block;
  background-color: white;
  border: 2px solid #EDEDED;
  margin-top: 17px;
  padding: 13px;
  border-radius: 24px;
  height: 47px;
  width: 161px;
}

.mm-mm-video:hover {
  background-color: #23ADF8;
  border-color: #23ADF8;
}

.mm-mm-video a {
  color: #23ADF8;
}

.mm-mm-video:hover a {
  color: white;
}

.mm-mm-video:hover img {
  filter: invert(42%) brightness(180%) contrast(180%);
}

.mega-drop-down a:hover+.mega-menu.hide-block {
  display: none;
}

.mm-mm-flyout {
  display: inline-block;
  width: 100%;
  font-size: 15px;
}

.animated.mega-menu {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.mega-menu ul li a:hover {
  color: #23ADF8;
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.mm-grid {
  width: 400px;
  max-width: 100%;
}

h4.row.mega-title {
  padding-left: 0;
}

.row .col-md-2,
.row .col-md-3,
.row .col-md-4 {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1349px) {
  .fl-node-5dafd29034e79 {
    width: 16%;
  }
  .fl-node-g84bp2nweskf {
    width: 3%;
  }
}

@media (min-width: 1300px) {
  .mega-menu-wrap {
    width: 1280px;
    margin: auto;
  }
}

@media (max-width: 1299px) {
  .mega-menu-wrap {
    width: 100%;
  }
}

@media (min-width: 1252px) {
  .exo-menu>li>a {
    display: block;
    padding: 30px 22px 32px;
  }
}

@media (max-width: 1251px) {
  .exo-menu>li>a {
    padding: 30px 15px 32px;
  }
}

@media (max-width: 1199px) {
  .mega-menu {
    width: 100vw;
  }
}

@media (max-width: 1151px) {
  .fl-col-group-equal-height .fl-col.fl-node-5dafd77b08a6a {
    display: none;
  }
}

@media (max-width: 1025px) {
  .fl-col-group-equal-height .fl-col.fl-node-5e6078af59549 {
    display: none;
  }
}

@media (min-width: 992px) {
  .exo-menu>li:nth-child(1)>a {
    padding-left: 0;
  }
  .col-md-2 {
    width: 16.66666667%;
    float: left;
  }
  .col-md-3 {
    width: 25%;
    float: left;
    padding-left: 0;
  }
  .col-md-4 {
    width: 33.33333333%;
    float: left;
  }
}

@media (max-width: 991px) {
  .empty {
    display: none;
  }
}

@media (min-width: 789px) and (max-width: 800px) {
  .exo-menu>li>a {
    padding: 30px 12px 32px;
  }
}

@media (min-width: 769px) {
  .mm-grid {
    margin-bottom: 27px;
  }
  #mm-button-group {
    display: none;
  }
}

@media (min-width: 768px) {
  .mega-menu,
  .flyout-mega-wrap,
  .Images,
  .Blog,
  .flyout-right>ul,
  .flyout-left>ul,
  li.drop-down>ul {
    position: fixed;
    margin-top: 0;
  }
  .flyout-right>ul {
    left: 100%;
  }
  .flyout-left>ul {
    right: 100%;
  }
  .mega-menu-wrap .row {
    margin-right: 0;
    margin-left: 0;
    padding: 0 15px;
  }
}

.mega-menu.hide-block {
  display: none !important;
}

@media (max-width: 768px) {
  .fl-builder-content .fl-node-5dafd29034e79 {
    width: calc(100vw - 130px) !important;
  }
  .fl-builder-content .fl-node-5dafd29034e7a {
    width: 130px !important;
  }
  .fl-builder-content .fl-node-g84bp2nweskf {
    display: none;
  }
  .fl-node-5dafd2ede7f58>.fl-module-content {
    margin-left: 0;
  }
  .exo-menu {
    min-height: 58px;
    width: 100%;
  }
  .mega-menu {
    padding: 15px;
  }
  .animated.mega-menu {
    padding-left: 22px;
    padding-right: 22px;
    margin-left: -22px;
    margin-right: -22px;
  }
  .mm-mega-menu-wrap {
    box-shadow: none;
  }
  .mega-menu-wrap {
    background-color: transparent;
  }
  ul.exo-menu.display {
    /*width: 100vw;*/
    left: 0;
    position: relative;
    margin-top: 25px;
    background-color: white;
    min-height: calc(100vh - 238px);
  }
  a.toggle-menu {
    right: 0;
    top: 0;
  }
  .mega-drop-down>a>span::after {
    float: right;
    padding-right: 6px;
  }
  .exo-menu.display a.toggle-menu span {
    display: none;
  }
  .exo-menu.display a.toggle-menu {
    position: absolute;
    right: 21px;
    padding: 20px 4px;
    font-size: 27px;
    margin-top: -70px;
    color: #212121;
  }
  .exo-menu.display a.toggle-menu:hover,
  a.toggle-menu:hover {
    color: #212121;
  }
  .exo-menu.display a.toggle-menu:before {
    display: block !important;
    font-family: 'Font Awesome\ 5 Free';
    content: '\f00d';
    transform: rotate(90deg);
    color: #B2B2B2;
    font-weight: 900;
    margin-top: 20px;
    margin-right: -48px;
  }
  .exo-menu>li>a {
    display: none;
    padding: 30px 8px 32px;
  }
  .exo-menu>li {
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #EDEDED;
  }
  .exo-menu>li.mm-li-button {
    border-bottom: none;
  }
  .display.exo-menu>li {
    width: calc(100vw - 44px);
    display: block;
    float: none;
  }
  .display.exo-menu>li>a {
    display: block;
    padding: 20px 0;
    font-size: 24px;
  }
  .mega-menu,
  .Images,
  .Blog,
  .flyout-right>ul,
  .flyout-left>ul,
  li.drop-down>ul {
    position: relative;
  }
  .mega-menu {
    background-color: #F8F8F8;
  }
  #menu-item-1225 {
    margin-top: -5px;
  }
  .fl-builder-content .fl-node-5dafd29034e7a {
    width: 40px !important;
  }
  #see-all-features {
    content: url('https://global-site.local/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
  }
  #just-4-steps {
    content: url('https://global-site.local/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business-mobile.jpg');
  }
  #mm-button-group {
    display: none;
  }
  #mm-button-group .mm-mm-button a.fl-button {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    font-size: 16px;
    border: 1px solid #23ADF8 !important;
    background-color: white !important;
    background-clip: border-box;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    width: 100%;
    text-align: center;
    /*margin: 10px 0;*/
  }
  .fl-page #mm-mm-button-2 .mm-mm-button a.fl-button {
    border: 1px solid #EDEDED !important;
  }
  .fl-page .mm-mm-button a.fl-button span {
    color: #23ADF8 !important;
  }
  #mm-button-group {
    position: relative;
    bottom: -5px;
    list-style-type: none;
    padding-left: 0;
    width: 100%;
    background-color: white;
    padding-bottom: 24px;
  }
  #mm-button-group li {
    padding: 10px 0 0 0;
    background-color: white;
  }
  .container-fluid.megamenusip {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    width: 100vw;
    min-height: 100vh;
  }
  h4.row.mega-title {
    padding-top: 11px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="header-top">
  <div class="container-fluid megamenusip">
    <ul class="exo-menu">
      <li class="mega-drop-down"><a href="#"><span>Product</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Instant Digital Signage Platform</h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-features.svg" alt="features" class="mm-mm-icon" />Features</a> <span class="mm-mm-subtext">See all the features packed into this powerful digital signage platform.</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-templates.svg" alt="templates" class="mm-mm-icon" />Templates</a> <span class="mm-mm-subtext">1000’s of professionally designed templates for every business.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty"> </h4>
                  <ul class="corporal">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-how-it-works.svg" alt="templates" class="mm-mm-icon" />How it Works</a> <span class="mm-mm-subtext">Find out how easy it is to get digital signage for your business.</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-industries.svg" alt="templates" class="mm-mm-icon" />Industries</a> <span class="mm-mm-subtext">Digital signage is perfect for any business with tailored solutions.</span></li>
                  </ul>
                </div>
                <div class="col-md-2">
                  <h4 class="row mega-title">Get the Player</h4>
                  <ul class="manos">
                    <li><a href="#">Hardware</a></li>
                    <li><a href="#">Player Software</a></li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <h4 class="row mega-title">What is Instant Digital Signage?</h4>
                  <div class="mm-grid">
                    <div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage.jpg" alt="What is Instant Digital Signage?" style="width: 100%;" id="see-all-features" /></div>
                    <div><span class="mm-mm-flyout"> Get an overview of how easy it is to get digital signage</span><br />
                      <button class="mm-mm-video">
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Solutions</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Industries</h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hospitality.svg" alt="features" class="mm-mm-icon" />Hospitality</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-retail.svg" alt="templates" class="mm-mm-icon" />Retail</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-hair-beauty.svg" alt="templates" class="mm-mm-icon" />Hair & Beauty</a> <span class="mm-mm-subtext">Hair Salons, Nail Salon, Laser…</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty"> </h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-medical.svg" alt="features" class="mm-mm-icon" />Medical</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-fitness.svg" alt="templates" class="mm-mm-icon" />Fitness</a> <span class="mm-mm-subtext">Cafe, Restaurant, Fast Food…</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-more.svg" alt="templates" class="mm-mm-icon" />More</a> <span class="mm-mm-subtext">We have solutions for all industries…</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title">Use Cases</h4>
                  <ul class="manos">
                    <li><a href="#">Digital Menu Boards</a></li>
                    <li><a href="#">Window Signage</a></li>
                    <li><a href="#">In-Store Signage</a></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title">About Mandoe</h4>
                  <ul class="manos">
                    <li><a href="#">Enterprise</a></li>
                    <li><a href="#">Customers</a></li>
                    <li><a href="#">Partner Program</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="mega-drop-down"><a href="#"><span>Resources</span></a>
        <div class="animated fadeIn mega-menu hide-block">
          <div class="mm-mega-menu-wrap">
            <div class="mega-menu-wrap">
              <div class="row">
                <div class="col-md-3">
                  <h4 class="row mega-title">Learn about the product</h4>
                  <ul class="cabeza">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-blog.svg" alt="features" class="mm-mm-icon" />Blog</a> <span class="mm-mm-subtext">Ultimate Guides for getting started, news, updates and much more.</span></li>
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-case-studies.svg" alt="templates" class="mm-mm-icon" />Case Studies</a> <span class="mm-mm-subtext">See how our customers have found success in their journey with us.</span></li>
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty"> </h4>
                  <ul class="corporal">
                    <li>
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-help-centre.svg" alt="templates" class="mm-mm-icon" />Help Centre</a> <span class="mm-mm-subtext">Learn how to get started, create content, manage schedules & more.</span></li>
                  </ul>
                </div>
                <div class="col-md-2">
                  <h4 class="row mega-title">Get in Touch</h4>
                  <ul class="manos">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Support</a></li>
                  </ul>
                </div>
                <div class="col-md-4">
                  <h4 class="row mega-title">Learn how it works</h4>
                  <div class="mm-grid">
                    <div><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/Just-4-steps-to-get-digital-signage-for-your-business.jpg" alt="Just 4 steps to get digital signage for your business" style="width: 100%;" id="just-4-steps" /></div>
                    <div><span class="mm-mm-flyout">Just 4 steps to get digital signage for your business</span><br />
                      <button class="mm-mm-video">
                      <a href="#"><img src="https://mandoedev.wpengine.com/wp-content/uploads/2022/02/icon-play.svg" alt="play video" title="play video"> Play Video</a>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li><a href="/pricing/software-only-pricing/">Pricing</a></li>
      <a href="#" class="toggle-menu visible-xs-block"><span>|||</span></a>
    </ul>
    <ul id="mm-button-group">
      <li class="mm-li-button" id="mm-mm-button-1">
        <div class="fl-button-wrap mm-mm-button">
          <a href="https://sandbox.mandoemedia.com/signup?origin=mktg_portal" target="_self" class="fl-button" role="button">
            <span class="fl-button-text">Start Free Trial</span>
          </a>
        </div>
      </li>
      <li class="mm-li-button" id="mm-mm-button-2">
        <div class="fl-button-wrap mm-mm-button">
          <a href="https://activate.mandoemedia.com" target="_self" class="fl-button" role="button">
            <span class="fl-button-text">Log In</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>