程序员经验分享-hwhale

移动菜单打开和关闭按钮在 Chrome 中显示，但在 Safari 中不显示

2023-12-15

我们的移动菜单在 Pixel 5 上的 Chrome 和 Firefox 中运行良好。

enter image description here

在 iPhone 5s（我唯一的 iPhone）、iPad Mini 2 和较旧的 iPad 上，汉堡菜单打开和关闭图标不显示。

在 Chrome 和 Firefox 以响应模式（移动视口宽度）工作的非视网膜桌面显示器上，Safari 将显示移动菜单打开图标，但不显示关闭图标。

打开的图标是三个旋转90度的管道：|||

关闭图标是一个字体很棒的符号：

.exo-menu.display a.toggle-menu::before {
    display: block !important;
    font-family: 'Font Awesome\ 5 Free';
    content: '\f00d';

我尝试过添加font-weight: 900;没有改变。

使用 Safari 移动检查器，该元素位于正确的位置。

您可以在移动视口中使用下面的代码或在野外查看问题@https://mandoedev.wpengine.com.

如何让移动菜单打开和关闭图标在 Safari 中工作，就像在 Pixel 5 上的 Chrome 和 Firefox 中工作一样？

帮助表示赞赏。

EDIT: pso's answer找到问题的原因，却找不到解决方案。非常感谢有人帮助我解决问题。

$(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);
          this.scrollIntoView(true);  // <---- fix
        }
    });
    $(".toggle-menu").click(function() {
        $("#mm-logo").toggleClass("fixed");
        $(".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;
}

.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;
}

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

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

.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: 8px 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 (min-width: 769px) and (max-width: 1251px) {
    .animated.fadeIn.mega-menu {
        padding-top: 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 !important;
    }
}

@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) {
    #mm-logo {
        position: fixed;
        top: 0;
        left: 0;
        background-color: white;
        padding-left: 23px;
    }

    #mm-logo.fixed {
        position: fixed;
        top: 0;
        background: white;
        /*left: 23px;*/
        z-index: 55;
    }

    .admin-bar #mm-logo {
        position: fixed;
        top: 46px;
    }

    .fl-page header.fl-builder-content {
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .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-module.fl-module-html.fl-node-3p7sb46cwvqu {
        position: absolute;
        top: 20px;
    }

    .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;
    }

    .animated.fadeIn.mega-menu {
        z-index: 0;
    }

    .mm-mega-menu-wrap {
        box-shadow: none;
    }

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

    ul.exo-menu.display {
        left: 0;
        top: 0px;
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: white;
        min-height: calc((100 * var(--vh)) - 210px);
        z-index: 0;
    }

    .admin-bar ul.exo-menu.display {
        min-height: calc(100vh - 256px);
    }

    a.toggle-menu {
        position: fixed;
        right: 0;
        padding: 8px 20px;
        font-size: 27px;
        color: black;
        top: 14px;
        transform: rotate(90deg);
    }
    
    .admin-bar a.toggle-menu {
        top: 58px;
    }

    .mega-drop-down,
    .bg-white {
        background-color: white;
    }

    .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: fixed;
        right: 2px;
        padding: 4px 22px;
        font-size: 27px;
        z-index: 55;
        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: 10px;
        margin-right: -10px;
    }

    .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://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
    }

    #just-4-steps {
        content: url('https://mandoedev.wpengine.com/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: 10px 22px 20px 22px;
        /*margin-bottom: 22px;*/
    }

    #mm-button-group li {
        padding: 10px 0 0 0;
        background-color: white;
    }

    .container-fluid.megamenusip {
        display: flex;
        flex-wrap: wrap;
        top: 66px;
        position: fixed;
        left: 0;
        width: 100vw;
        height: calc(100% - 56px);
        padding-left: 0;
        padding-right: 0;
        justify-content: stretch;
        overflow-y: scroll;
    }

    header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
        display: -webkit-box;
        display: -webkit-flex;
        background: white;
        position: fixed;
        display: -ms-flexbox;
        display: flex;
    }

    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">
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li></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></div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bg-white"><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">
      </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>

我已经移动了toggle-menu出于megamenusip。现在它适用于 Safari。

$(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);
      this.scrollIntoView(true); // <---- fix
    }
  });
  $(".toggle-menu").click(function() {
    $("#mm-logo").toggleClass("fixed");
    $(".exo-menu").toggleClass("display");
    // adding .fa-times class overrieds fa-bars icon
    // so for switching we don't have to hide anything :)
    $(".toggle-menu i").toggleClass("fa-times");
    $("#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;
}

.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;
}

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

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

.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: 8px 20px;
  font-size: 27px;
  color: black;
  top: 0px;
  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 (min-width: 769px) and (max-width: 1251px) {
  .animated.fadeIn.mega-menu {
    padding-top: 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 !important;
  }
}

@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;
}


/* hide in normal case*/

.toggle-menu {
  display: none;
}

@media (max-width: 768px) {
  /* show in small devices */
  .toggle-menu {
    display: block;
  }
  #mm-logo {
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    padding-left: 23px;
  }
  #mm-logo.fixed {
    position: fixed;
    top: 0;
    background: white;
    /*left: 23px;*/
    z-index: 55;
  }
  .admin-bar #mm-logo {
    position: fixed;
    top: 46px;
  }
  .fl-page header.fl-builder-content {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  }
  .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-module.fl-module-html.fl-node-3p7sb46cwvqu {
    position: absolute;
    top: 20px;
  }
  .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;
  }
  .animated.fadeIn.mega-menu {
    z-index: 0;
  }
  .mm-mega-menu-wrap {
    box-shadow: none;
  }
  .mega-menu-wrap {
    background-color: transparent;
  }
  ul.exo-menu.display {
    left: 0;
    top: 0px;
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    background-color: white;
    min-height: calc((100 * var(--vh)) - 210px);
    z-index: 0;
  }
  .admin-bar ul.exo-menu.display {
    min-height: calc(100vh - 256px);
  }
  a.toggle-menu {
    position: fixed;
    right: 0;
    padding: 8px 20px;
    font-size: 27px;
    color: black;
    top: 14px;
  }
  .admin-bar a.toggle-menu {
    top: 58px;
  }
  .mega-drop-down,
  .bg-white {
    background-color: white;
  }
  .mega-drop-down>a>span::after {
    float: right;
    padding-right: 6px;
  }
  a.toggle-menu.display span {
    aaadisplay: none;
  }
  a.toggle-menu:hover {
    color: #212121;
  }
  .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://mandoedev.wpengine.com/wp-content/uploads/2022/02/what-is-digital-signage-mobile.jpg');
  }
  #just-4-steps {
    content: url('https://mandoedev.wpengine.com/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: 10px 22px 20px 22px;
    /*margin-bottom: 22px;*/
  }
  #mm-button-group li {
    padding: 10px 0 0 0;
    background-color: white;
  }
  .container-fluid.megamenusip {
    display: flex;
    flex-wrap: wrap;
    top: 66px;
    position: fixed;
    left: 0;
    width: 100vw;
    height: calc(100% - 56px);
    padding-left: 0;
    padding-right: 0;
    justify-content: stretch;
    overflow-y: scroll;
  }
  header .fl-col-group.fl-col-group-equal-height.fl-col-group-custom-width {
    display: -webkit-box;
    display: -webkit-flex;
    background: white;
    position: fixed;
    display: -ms-flexbox;
    display: flex;
  }
  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">
<!-- fontawesome uses <i> element for icons -->
  <a href="#" class="toggle-menu visible-xs-block"><i class="fa fa-bars"></i></a>
  <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">
                  </ul>
                </div>
                <div class="col-md-3">
                  <h4 class="row mega-title empty">&nbsp;</h4>
                  <ul class="corporal">
                    <li></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></div>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="bg-white"><a href="/pricing/software-only-pricing/">Pricing</a></li>
    </ul>
    <ul id="mm-button-group">
      <li class="mm-li-button" id="mm-mm-button-1">
      </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>

说明在代码注释中。放在.toggle-menu在您的实际网站代码中的适当级别。一些相关的 CSS 规则a.toggle-menu现在是多余的。我还没有从代码中清除它们。

啊！我发现您已经移动了网站上的切换菜单。我将把答案留给其他人。我的实现有点不同希望它有所帮助。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

safari

mobilesafari

移动菜单打开和关闭按钮在 Chrome 中显示，但在 Safari 中不显示 的相关文章

  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content

  • CSS：缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

  • 是否有针对 CSS 位置和可点击区域的 Android 浏览器错误的解决方法？

    当您有一些可点击的内容时 例如 a a

  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些

  • CSS 中的像素与像素密度

    我对 HTML 和 CSS 非常陌生 我突然想到 当决定某个东西是 5px 时 比如说 由于像素的物理尺寸取决于密度 所以 5px 在 100 ppi 的屏幕上看起来肯定比在 300 ppi 的屏幕上看起来更大ppi 这是正确的吗 如果是

  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for

  • 如何重置使用 JavaScript 更改的 CSS 属性？

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选

  • 现在 CSS3 供应商前缀有多必要？ [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再

  • Safari 支持 JavaScript window.onerror 吗？

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s

  • 为什么元素上的负底部边距会降低该元素父元素的高度？

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

  • 单击时更改 CSS 属性

    我试图在单击另一个元素时更改一个元素的 CSS 我进行了很多搜索 但没有任何效果是完美的 目前我正在使用下面的代码 但它不起作用 谁能告诉我我错过了什么 div hello world div img src zoom png functi

  • jQuery 更改事件未在输入元素上触发

    首先 我检查了与我的问题类似的每个主题 不幸的是 我还没有找到答案 我尝试结合一些答案 但没有成功 注 刚开始学习jQuery 所以这是我的问题 我创建了一个带有四个文本输入和一个按钮的表单 每个输入内部都有一个 svg 图标和一个占位符文

  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top

  • 当悬停时不透明度发生变化时，Google Chrome 中的背景会发生变化

    我使用 Jquery 设置了悬停效果 可以更改悬停元素的不透明度 它在所有最新的浏览器中都能正常工作 除了 Chrome 它会改变 body 元素的背景 这是链接 http wrong ro tataia http wrong ro tat

  • 更改链接悬停时的正文背景颜色

    当鼠标悬停在页面上时如何更改页面背景a 我正在寻找仅 css 的解决方案 我知道你可以通过 css 到达子元素 但我不知道如何 是否可以到达主体 看看这个DEMO http jsfiddle net bhavuksuthar bjsvhze

  • 呈现为 Flexbox 的有序列表不显示项目符号/小数（项目也呈现为 Flexbox）

    我有一个有序列表 ol 有它的display属性设置为flex 列表项也呈现为弹性框 这样做会导致项目符号 数字 不再显示 有什么办法可以让项目符号显示在ol有课 questions questions likert 在40px的区域pad

  • 为什么我在 Safari 开发者工具中看不到预检（方法：选项）xhr 请求？

    由于我不明白的原因 Safari 无法 间歇性但持续地 连接到我们 QA 基础设施上的 Rails 应用程序 静态前端和 API 后端 我将就此写另一个问题 目前 让我感到困惑的一件事是 Safari 一般来说 似乎从未显示其他浏览器 Ch

  • 在 HTML 中移动选取框/下移文本

    我正在尝试向下移动或移动 HTML 中的文本 但我似乎无法将其移动到任何地方 我添加了一个颜色命令来更改文本的颜色 但似乎只是移动了 它一直到顶部

  • 使用文本遮盖视频

    是否可以使用 HTML CSS 文本来屏蔽视频 我已经找到并设置了这种工作方式 但没有一种允许文本后面有透明背景 例如 这支笔要求您进行某种填充 它并不是真正掩盖实际视频 而是创造幻觉 https codepen io dudleystor

  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高

随机推荐

热门标签