title: my mega menu in safari not same as firefox and chrome.. weird css behaviour?
body: <p>Safari show the overlap text... I have no idea what is happen in safari. 
  firefox and chrome no overlap text. </p>
  
  <p>here is my screenshot: </p>
  
  <p>safari: 
  <a href="https://i.stack.imgur.com/hf7v2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hf7v2.png" alt="safari "></a></p>
  
  <p>firefox:
  <a href="https://i.stack.imgur.com/NrOOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NrOOe.png" alt="firefox"></a></p>
  
  <p>PLEASE USE the safari to test the result. I believe that is conflict about my css? jquery should not be a problem
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//START MEGA MENU JQUERY
  jQuery(document).ready(function($){
   
      //on mobile - open submenu
   $('.has-children').children('a').on('click', function(event){
    //prevent default clicking on direct children of .has-children 
    event.preventDefault();
    var selected = $(this);
    selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
   });
  
   
   $('.lg-dropdown-content').menuAim({
    activate: function(row) {
     $(row).children().addClass('is-active').removeClass('fade-out');
     if( $('.lg-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
    },
    deactivate: function(row) {
     $(row).children().removeClass('is-active');
     if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
      $('.lg-dropdown-content').find('.fade-in').removeClass('fade-in');
      $(row).children('ul').addClass('fade-out')
     }
    },
    exitMenu: function() {
     $('.lg-dropdown-content').find('.is-active').removeClass('is-active');
     return true;
    },
   });
  
  
   //submenu items - go back link
   $('.go-back').on('click', function(){
    var selected = $(this),
     visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
    selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
   }); 
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* BASIC style for nav, you can ingore this part */
  a:focus {
    text-decoration:none;
  }
  
  a {
    transition: all 0.3s ease 0s;
    text-decoration:none;
  }
  
  a:hover {
      color: #5ad5f4;
      text-decoration: none;
  }
  
  a:active, a:hover {
      outline: 0 none;
  }
  
  ul{
      list-style: outside none none;
      margin: 0;
      padding: 0
  }
  
  .lg-dropdown-content {
    background-color: #ddd;
  }
  
  /* END BASIC style for nav, you can ingore this part */
  
  
  /* START MEGA MENU CSS */
  
  .back-width {
      width: 100%;
  }
  
  ul.column-two {
      column-count: 2;
      -webkit-column-count: 2;
      -moz-column-count: 2;
  }
  
  .minheight2{
      min-height:0px;
  }
  
  .lg-dropdown h2,
  .lg-dropdown-content a,
  .lg-dropdown-content ul a {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
  }
  
  
  .lg-dropdown {
      margin-top: 15px;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #111433;
      color: #ffffff;
      visibility: hidden;
      position: absolute;
      height: auto;
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      background-color: transparent;
      color: #111433;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      opacity: 0;
      -webkit-transform: translateY(30px);
      -moz-transform: translateY(30px);
      -ms-transform: translateY(30px);
      -o-transform: translateY(30px);
      transform: translateY(30px);
      -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
      -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
      transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  }
  
  .lg-dropdown.dropdown-is-active {
      visibility: visible;
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
      -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
      transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  }
  
  
  .lg-dropdown-content &gt; li{
      display: inline-block;
  }
  
  
  .lg-dropdown-content, .lg-dropdown-content ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      padding-top: 0;
      overflow: visible;
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      transition: transform 0.3s;
  }
  
  .lg-dropdown-content a {
      display: block;
      color: #000;
      height: 50px;
      line-height: 50px;
      font-size: 1.5rem;
      /* truncate text with ellipsis if too long */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-top-width: 1px;
      border-style: solid;
      border-color: #ebebeb;
      border:none;
      /* Force Hardware Acceleration */
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
      transition: opacity 0.3s, transform 0.3s;
  }
  
  .lg-dropdown-content ul a {
      display: block;
      color: #111433;
      /* truncate text with ellipsis if too long */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-top-width: 1px;
      border-color: #242643;
      border-style: solid;
      border:none;
      /* Force Hardware Acceleration */
      -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
      -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  }
  
  
  .lg-dropdown-content.is-hidden &gt; li &gt; a, .lg-dropdown-content.move-out &gt; li &gt; a, .lg-dropdown-content ul.is-hidden &gt; li &gt; a, .lg-dropdown-content ul.move-out &gt; li &gt; a {
      opacity: 1;
  }
  
  .lg-dropdown-content.is-hidden, .lg-dropdown-content ul.is-hidden {
      /* push the secondary dropdown items to the right */
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
      -o-transform: translateX(100%);
      transform: translateX(100%);
  }
  
  .lg-dropdown-content ul.move-out &gt; li &gt; a{
      /* push the dropdown items to the left when secondary dropdown slides in */
      -webkit-transform: translateX(-100%);
      -moz-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      -o-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: hidden;
  }
  
  
  .lg-dropdown-content .see-all a {
      color: #5f88c3;
  }
  
  .lg-dropdown-content.move-out &gt; li &gt; a{
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
  }
  .lg-dropdown-content .lg-menu {
      top: 100%;
      height: auto;
      overflow: hidden;
      padding-bottom: 65px;
      background-color: #ffffff;
      box-shadow: 0 1px 2px rgba(86, 86, 90, 0.5);
  }
  
  .lg-dropdown-content .lg-menu.is-hidden {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
  }
  .lg-dropdown-content .lg-menu.fade-in {
      /* animate fade in */
      -webkit-animation: xs-fade-in 0.2s;
      -moz-animation: xs-fade-in 0.2s;
      animation: xs-fade-in 0.2s;
  }
  .lg-dropdown-content .lg-menu.fade-out {
      /* animate fade out */
      -webkit-animation: xs-fade-out 0.2s;
      -moz-animation: xs-fade-out 0.2s;
      animation: xs-fade-out 0.2s;
  }
  
  .lg-dropdown-content .lg-menu &gt; .see-all {
      position: absolute;
      bottom: 1px;
      height: 45px;
      text-align: center;
  }
  .lg-dropdown-content .lg-menu &gt; .see-all a {
      margin: 0;
      height: 100%;
      line-height: 45px;
      background: #ebebeb;
      pointer-events: auto;
      -webkit-transition: color 0.2s, background-color 0.2s;
      -moz-transition: color 0.2s, background-color 0.2s;
      transition: color 0.2s, background-color 0.2s;
  }
  .lg-dropdown-content .lg-menu &gt; .see-all a:hover {
      color: #ffffff;
      background-color: #111433;
  }
  
  .lg-dropdown-content .lg-menu &gt; li {
      /* 3 column */
      width: 33.333%;
      float: left;
  }
  
  .lg-dropdown-content .lg-menu::before {
      /* this is the separation line in the middle of the .lg-menu element */
      position: absolute;
      content: '';
      top: 290px;
      left: 15px;
      right: 15px;
      height: 1px;
      width: 100%;
      background-color: #ebebeb;
  }
  
  .lg-dropdown-content .lg-menu &gt; li &gt; a {
      color: #5f88c3;
      font-size: 1.6rem;
      margin-bottom: 10px;
      line-height: 30px;
      height: 30px;
      pointer-events: none;
  }
  .lg-dropdown-content .lg-menu &gt; li &gt; a::after, .lg-dropdown-content .lg-menu &gt; li &gt; a::before {
      /* hide the arrow */
      display: none;
  }
  .lg-dropdown-content .lg-menu.move-out &gt; li &gt; a {
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      transform: translateX(0);
  }
  .lg-dropdown-content .lg-menu &gt; li {
      margin: 20px 0;
      border-right: 1px solid #ebebeb;
      padding: 0 30px;
      height: 250px;
  }
  
  .lg-dropdown-content .lg-menu &gt; li &gt; ul {
      -webkit-transform: translate(0);
      -moz-transform: translate(0);
      -ms-transform: translate(0);
      -o-transform: translate(0);
      transform: translate(0);
      position: relative;
      height: auto;
  }
  .lg-dropdown-content .lg-menu &gt; li &gt; ul &gt; .go-back {
      display: none;
  }
  .lg-dropdown-content .lg-menu a {
      line-height: 22px;
      height: 20px;
      font-size: 1.3rem;
      padding-left: 0;
  }
  
  .lg-dropdown-content .lg-menu ul {
      padding-bottom: 25px;
      overflow: hidden;
      height: auto;
      min-height: 100%;
  }
  .lg-dropdown-content .lg-menu .go-back a {
      padding-left: 20px;
  }
  
  .lg-dropdown-content .lg-menu .go-back a::before, .lg-dropdown-content .lg-menu .go-back a::after {
      left: 0;
  }
  .lg-dropdown-content .lg-menu .see-all {
      /*position: absolute;*/
      /*bottom: 0;*/
      /*left: 0;*/
      width: 100%;
  }
  
  .lg-dropdown-content &gt; .has-children &gt; ul {
      visibility: hidden;
  }
  .lg-dropdown-content &gt; .has-children &gt; ul.is-active {
      /* when hover over .lg-dropdown-content items - show subnavigation */
      visibility: visible;
  }
  .lg-dropdown-content &gt; .has-children &gt; .lg-menu.is-active &gt; li &gt; ul {
      /* if .lg-menu is visible - show also subnavigation */
      visibility: visible;
  }
  .lg-dropdown-content &gt; .has-children &gt; a.is-active {
      /* hover effect for .lg-dropdown-content items with subnavigation */
      color: #5f88c3;
  }
  .lg-dropdown-content &gt; .has-children &gt; a.is-active::before, .lg-dropdown-content &gt; .has-children &gt; a.is-active::after {
      background: #5f88c3;
  }
  
  
  
  .has-children &gt; a::before, .go-back a::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  
  
  .has-children &gt; a::after, .go-back a::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }
  
  .has-children.root-menu &gt; a::after {
  
      -webkit-transform: rotate(130deg);
      -moz-transform: rotate(130deg);
      -ms-transform: rotate(130deg);
      -o-transform: rotate(130deg);
      transform: rotate(130deg);
  }
  
  
  .has-children &gt; a {
      padding-right: 40px;
  }
  .has-children &gt; a::before, .has-children &gt; a::after {
      /* arrow goes on the right side - children navigation */
      right: 20px;
      -webkit-transform-origin: 9px 50%;
      -moz-transform-origin: 9px 50%;
      -ms-transform-origin: 9px 50%;
      -o-transform-origin: 9px 50%;
      transform-origin: 9px 50%;
  }
  
  .lg-dropdown-content .go-back a {
      padding-left: 40px;
  }
  .lg-dropdown-content .go-back a::before, .lg-dropdown-content .go-back a::after {
      /* arrow goes on the left side - go back button */
      left: 20px;
      -webkit-transform-origin: 1px 50%;
      -moz-transform-origin: 1px 50%;
      -ms-transform-origin: 1px 50%;
      -o-transform-origin: 1px 50%;
      transform-origin: 1px 50%;
  }
  
  .root-menu.has-children &gt; a::before, .root-menu.has-children &gt; a::after {
      background: #fff;
  }
  
  .has-children &gt; a::before, .has-children &gt; a::after, .go-back a::before, .go-back a::after {
      /* arrow icon in CSS - for element with nested unordered lists */
      content: '';
      position: absolute;
      top: 50%;
      margin-top: 1px;
      display: inline-block;
      height: 2px;
      width: 10px;
      background: #ffffff;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  
  
  @media only screen and (min-width: 1024px) {
      .has-children &gt; a::before, .has-children &gt; a::after, .go-back a::before, .go-back a::after {
          background: #b3b3b3;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
      &lt;!-- css bootstrap --&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;!-- import jquery --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://rawgit.com/kamens/jQuery-menu-aim/master/jquery.menu-aim.js"&gt;&lt;/script&gt;
      &lt;!-- END import jquery --&gt;
  &lt;/head&gt;
  
  
  &lt;!-- header start --&gt;
  &lt;header class="header-pos navbar-fixed-top"&gt;
      &lt;div class="header-bottom-area" &gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="inner-container"&gt;
                  &lt;div class="row"&gt;
  
                      &lt;div class="col-lg-12" style="padding:0px;"&gt;
                          &lt;nav class="lg-dropdown dropdown-is-active"&gt;
                              &lt;ul class="lg-dropdown-content"&gt;
                                  &lt;li class="has-children root-menu"&gt;
                                      &lt;a href="#" class=""&gt;Products&lt;/a&gt;
  
                                      &lt;ul class="lg-menu is-hidden fade-out"&gt;
                                          &lt;li class="see-all"&gt;&lt;a href="#"&gt;All Products&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="has-children"&gt;&lt;a href="#"&gt;Fashion&lt;/a&gt;
                                              &lt;ul class="is-hidden column-two move-out"&gt;
                                                  &lt;li class="go-back"&gt;&lt;a href="#0"&gt;Products&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li class="see-all"&gt;&lt;a href="#"&gt;All Fashion&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li class="has-children"&gt;&lt;a href="#" title="Women Fashion"&gt;Women Fashion&lt;/a&gt;
                                                      &lt;ul class="column-two menu-level-2"&gt;
                                                          &lt;li class="go-back back-width"&gt;&lt;a href="#0"&gt;Back&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li class="see-all"&gt;&lt;a href="#"&gt;All Women Fashion&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="#" title="Tudung"&gt;Tudung&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="#" title="safari"&gt;safari&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="#" title="safari 2"&gt;safari 2&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="#" title="Jubah"&gt;Jubah&lt;/a&gt;&lt;/li&gt;
                                                          &lt;li&gt;&lt;a href="#" title="Cheong Sam"&gt;Cheong Sam&lt;/a&gt;&lt;/li&gt;
                                                      &lt;/ul&gt;
                                                  &lt;/li&gt;
                                                  &lt;li&gt;&lt;a href="#" title="Baby Fashion"&gt;Baby Fashion&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li&gt;&lt;a href="#" title="Man Fashion"&gt;Man Fashion&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                          &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>