问CSS/HTML下拉菜单在Chrome、Edge上显示在左侧，而不是在parent下方，而不是Safari

EN

<ul class="main-nav">
  <li><a href="/blog/">Blog</a></li>
  <li><a href="/books/">Books</a></li>
  <li class="dropdown">
  <a href="/vladvir/">The World of Vladvir</a>
   <ul class="drop-nav">
    <li><a href="/locations/">Locations</a></li>
    <li><a href="/pronunciation/">Pronunciation Guide</a></li>
   </ul>
  </li>
  <li class="dropdown">
  <a href="/about/">About</a>
   <ul class="drop-nav">
    <li><a href="/about/">The Author</a></li>
    <li><a href="/barhamink/">Barham Ink</a></li>
    <li><a href="/the-site/">The Site</a></li>
   </ul>
</li>
</ul>

.main-nav {
  font-family: Quattrocento Sans;
  font-weight: 700;
  background: green;
  border-top: 1px solid gray;
  padding: 6px;
  margin: 0;
  text-align: center;
}

  .main-nav,
  .drop-nav {
    background: green;
  }

  .main-nav > li {
    display: inline;
  }

  .main-nav li:first-child {
    display: inline;
  }

  .main-nav a {
    color: white;
    font-size: 1em;
    line-height: 1em;
    margin-right: 15px;
    display: inline-block;
  }

.dropdown {
  color: white;
  font-size: 1em;
  line-height: 1em;
  position: relative;
  margin-right: 15px;
}

.drop-nav {
  position: absolute;
  display: none;
}
  .drop-nav a {
    font-size: .8em;
    margin-right: 8px;
    position: relative;
  }

  .drop-nav li {
    white-space: nowrap;
    text-align: left;
    margin-right: 6px;
    position: relative;
    list-style: none;
  }

    .drop-nav li:first-child {
      margin-top: 6px;
      display: block;
    }

    .drop-nav li:last-child {
    }

  .dropdown:hover > .drop-nav {
    position: absolute;
    display: block;
  }