jQuery toggle() 從下到上工作，但不是從上到下

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 ai { 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

刪除display: none; 來自.mega-menu ：

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

此外，使用相同的方法為 hover 和單擊處理程序切換菜單。 對兩者使用不同的方法會使事情變得復雜。 我在以下演示中對小屏幕和寬屏幕都使用.mega-menu.hide-block ：Demo on 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 ai { 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">&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>