CSS/HTML下拉菜单显示在左侧，而不是在Chrome、Edge上的父级下方，但不在Safari上

菜单工作正常，显示在父项下方，并进行了正确的填充和边距调整，以确保视觉清晰度。在Chrome和Edge上，它始终显示在左侧。我已经研究过重置边距和填充，但是我要么在代码中找不到要重置的正确位置，要么这不是问题所在。我还研究了设置为relative的不同元素，它们具有类似（非）结果

HTML

以及在Safari和Chrome之间切换时显示行为的JSFIDLE

变化

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

到

---

更新的fiddle解决了此问题。非常感谢！我是所有这些的初学者，在提问之前，我花了很多时间阅读、换行、搜索这里和其他答案网站，这让我很尴尬。欢迎。很高兴你的问题解决了。请标出答案，以便其他人知道。。。

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

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

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