Margin-top different in Microsoft edge than google

I created a sub-menu in my navigation on my page, but when i open it in Microsoft edge the sub menus top margin is different than googles.

Im not sure which version of MS edge im exactly using. I think its the default MS edge version on windows 10, so legacy.

This is the version, I suppose. About this app: Microsoft Edge 44.18362.449.0, Microsoft EdgeHTML 18.18362

HTML

  <body>
    <header>
          <div class="head">
            <nav>
              <ul class="menu-tricks-ul">
                <li><a href="Úvod.html">Úvod</a></li>

                <li class="menu-tricks-li"><a href="Triky.html">Triky</a>
                  <div class="sub-menu-1">
                    <center>
                      <ul>
                        <li><a href="Triky.html" >Nejoblíbenější triky</li></a>
                        <li><a href="Triky s kartami.html">Triky s kartami</li></a>
                        <li><a href="Kejkle s vejci.html">Kejkle s vejci</li></a>
                        <li><a href="Hratky s ohnem.html">Hrátky s ohněm</li></a>
                        <li><a href="Fyzika a chemie ve sluzbach.html">Fyzika a chemie ve službách</li></a>
                        <li><a href="Zerty se sirkami.html">Žerty se sirkami</li></a>
                        <li><a href="Kouzelny inkoust.html">Kouzelný inkoust</li></a>
                      </ul>
                    </center>
                  </div>
                </li>

                <li><a href="Kontakt.html">Kontakt</a></li>

                <li><a href="#"  style="color:#4ababe;">Blog</a></li>
              </ul>
            </nav>
          </div>
        </header>
   <body>

CSS

  *{
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body{
    font-family: 'Open Sans';
    background-image: linear-gradient(to bottom, #58585a, black);
    color: white;
    margin: 0;

  }


  .container{
    height: auto;
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
  a{
    color: white;
    text-decoration: none;
  }

  a:hover {
  color: #b1b3b4;
  }


  .head {
    width: 100%;
    background-image: linear-gradient(to right, #333333, #58585a);
    border-bottom: 2px solid white;
  }

  nav{
    height: 10%;
    width: 65%;
    justify-content: center;
    padding-left: 100px;
  }

  nav ul{
    height: 100%;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
  }

  nav ul li{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
    font-size: 150%;
  }

  .sub-menu-1{
    display: none;
  }

  .menu-tricks-li:hover .sub-menu-1{
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, #4ababe, #1c8080);
    margin-top: 170px;
    margin-left: -120px;
  }

  .menu-tricks-li:hover .sub-menu-1 ul{
    display: block;
  }

  .menu-tricks-li:hover .sub-menu-1 ul li{
    padding: 10px;
    background: transparent;
    font-size: 80%;
  }

Sub-menu in google is right bellow "Triky", but in Microsoft Edge its overflowing the text. When i change the margin from 185px to 385px its correct in Edge but lower in Google.

And i noticed on Internet Explorer 11 its even lower than on google. So in MS edge it is up, in Google it is in the middle and in Internet Explorer 11 it is at the bottom. Im scared to open another browsers.

Thank you

Solution

I tried to test the issue and I can see the issue in the MS Edge legacy browser.

I try to check the CSS code and found that display: flex and flex-direction: column in nav ul li CSS class causing this issue.

I found that if you remove it or comment it then it can help to fix this issue in the MS Edge legacy browser and it will also look properly in other browsers.

Please note that I had also decreased the margin-top to 10 px in the code.

Modified code:

<!doctype html>
<html>
   <head>
      <style>
         *{
         margin: 0;
         padding: 0;
         list-style: none;
         }
         body{
         font-family: 'Open Sans';
         background-image: linear-gradient(to bottom, #58585a, black);
         color: white;
         margin: 0;
         }
         .container{
         height: auto;
         width: 90%;
         margin: 0 auto;
         padding: 0;
         }
         a{
         color: white;
         text-decoration: none;
         }
         a:hover {
         color: #b1b3b4;
         }
         .head {
         width: 100%;
         background-image: linear-gradient(to right, #333333, #58585a);
         border-bottom: 2px solid white;
         }
         nav{
         height: 10%;
         width: 65%;
         justify-content: center;
         padding-left: 100px;
         }
         nav ul{
         height: 100%;
         list-style-type: none;
         display: flex;
         justify-content: space-around;
         }
         nav ul li{
         /*  display: flex;
         flex-direction: column;*/
         justify-content: center;
         text-transform: uppercase;
         font-size: 150%;
         }
         .sub-menu-1{
         display: none;
         }
         .menu-tricks-li:hover .sub-menu-1{
         display: block;
         position: absolute;
         background-image: linear-gradient(to bottom, #4ababe, #1c8080);
         margin-top: 10px;
         margin-left: -120px;
         }
         .menu-tricks-li:hover .sub-menu-1 ul{
         display: block;
         }
         .menu-tricks-li:hover .sub-menu-1 ul li{
         padding: 10px;
         background: transparent;
         font-size: 80%;
         }
      </style>
   </head>
   <body>
      <header>
         <div class="head">
            <nav>
               <ul class="menu-tricks-ul">
                  <li><a href="Úvod.html">Úvod</a></li>
                  <li class="menu-tricks-li">
                     <a href="Triky.html">Triky</a>
                     <div class="sub-menu-1">
                        <center>
                           <ul>
                              <li><a href="Triky.html" >Nejoblíbenější triky</li>
                              </a>
                              <li><a href="Triky s kartami.html">Triky s kartami</li>
                              </a>
                              <li><a href="Kejkle s vejci.html">Kejkle s vejci</li>
                              </a>
                              <li><a href="Hratky s ohnem.html">Hrátky s ohněm</li>
                              </a>
                              <li><a href="Fyzika a chemie ve sluzbach.html">Fyzika a chemie ve službách</li>
                              </a>
                              <li><a href="Zerty se sirkami.html">Žerty se sirkami</li>
                              </a>
                              <li><a href="Kouzelny inkoust.html">Kouzelný inkoust</li>
                              </a>
                           </ul>
                        </center>
                     </div>
                  </li>
                  <li><a href="Kontakt.html">Kontakt</a></li>
                  <li><a href="#"  style="color:#4ababe;">Blog</a></li>
               </ul>
            </nav>
         </div>
      </header>
   </body>
</html>

Output in the MS Edge legacy browser(on the left side) and Google Chrome browser: