Navigation bar is being displayed correctly using Firefox and Chrome, but when opening the website with Safari on an iPad or Mac(Safari) is not show

Question

but doesn't show navbar element on safari browser. It's only showed the colored line, the error doesn't want to appear when pressed, the menu section doesn't open the error doesn't want to appear when pressed, the menu section doesn't open, how can I solve it, can someone help me

MY CODE HTML`

<header class="dark responsive-menu">
  <nav role="navigation">
    <a href="javascript:void(0);" class="ic menu">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </a>
    <a href="javascript:void(0);" class="ic close"></a>
    <ul class="main-nav mainmenu">
      <li class="top-level-link top">
        <div class="col-sm-12 col-xs-12">
          <div class="row">
            <ul class="sub-menu-lists top">
              <li>
                <a href="/" class="btn-block">
                  <i class="fa fa-home"></i> Beranda </a>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </nav>
</header> ``

` MY CODE CSS

ul.main-nav > li ul.sub-menu-lists.top {
    background: #c6e5ff;
    padding: 15px 0;
    margin-bottom: 25px;
    }
  
  .sub-menu-block { padding: 0 10px; }
  .banners-area { padding-bottom: 0px;  }
  .banners-area div { margin-bottom: 15px;  }
  .banners-area { border-top: 1px solid #444; }

  header.dark.responsive-menu {
    width: 20px;
    position: absolute;
    /height: 50px;/
    top: -57px;
    left: 15px;
    /right: 0px;/
  }
  /*.b .p-l-r-10{
      padding-right:0;
      padding-left:0;
  }*/
  .top-level-link.top {display: block;}
}

@media only screen and (min-width:546px) and (max-width:683px) {
    .b .mresponsv40 {
        position: relative;
        top: 64px;
        left: -65px;
        margin-top: -60px;
    }
}

@media only screen and (min-width:273px) and (max-width:546px) {
    header.dark .ic.menu .line { background-color: #fff; } 
    
    .shadowboxonglobal {
        display: none;
    }
}

@media only screen and (min-width:769px) {
  .ic.menu { display: none; }
  /* Main Menu for Desktop Devices  */
  ul.main-nav { display: block; position: relative; }
  .sub-menu-block { padding:0 15px; }
  

  /* Sub Menu */
  ul.main-nav > li > div.sub-menu-block { 
  visibility: hidden;
  background-color: #f9f9f9;
  position: absolute;
  margin-top: 0px;
  margin-left:-10px;
  /width: 100%;/
  width:230px;
  color: #333;
  /left: 0;/
  box-sizing: border-box;
  z-index : 3;
  font-size: 16px;
  /*border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;*/
  opacity: 0;
  
  }
  /Sub Mega Menu/
  .sub-mega-menu{
      width:100%!important;
      left:0;
  }
  
  ul.main-nav > li:hover > div.sub-menu-block{ 
    background-color: #193f6a; 
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    margin-left: -10px;
    margin-top:5px;
    z-index:9999;
  }
  
  ul.main-nav > li > div.sub-menu-block > * {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.4s;
      -moz-transition-duration: 0.4s;
      -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  
  ul.main-nav > li:hover > div.sub-menu-block > * {
    opacity: 1;
  }
  
  .sub-menu-head { font-size: 20px;}
  
  /* List Separator: Outer Border */
  /header.dark ul.main-nav > li > a { border-right: 1px solid #bbb; }/
  header.light ul.main-nav > li > a { border-right: 1px solid #666; }
  
  /* List Separator: Inner Border */
  ul.main-nav > li > a:after {
    content: '';
    width: 1px;
    height: 62px;
    position: absolute;
    right:0px;
    top: 0px;
    z-index : 2;
  }
  ul.main-nav > li > a.mega-menu > span { display: block; vertical-align: middle; }
  ul.main-nav > li > a.mega-menu > span:after {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: '';
    background-color: transparent;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
  }