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

【问题标题】：CSS/HTML Dropdown Menu appears left instead of below parent on Chrome, Edge, but not SafariCSS/HTML 下拉菜单出现在左侧而不是 Chrome、Edge 上的父级下方，但不是 Safari
【发布时间】：2018-06-03 23:15:45
【问题描述】：

菜单正常工作，显示在父项下方，并具有正确的填充和边距调整，以提高视觉清晰度。在 Chrome 和 Edge 上，它一直显示在左侧。我已经查看了重置边距和填充，但我要么无法在代码中找到正确的位置来重置，要么这不是问题。我还查看了设置为相对具有相似（非）结果的不同元素。

HTML

<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>

CSS

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

还有一个 JSFiddle，它展示了在 Safari 和 Chrome 之间切换时的行为。 https://jsfiddle.net/NateBarham/st9tuLa3/

【问题讨论】：

标签： html css google-chrome safari

【解决方案1】：

改变

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

到

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

更新小提琴https://jsfiddle.net/st9tuLa3/2/

【讨论】：

解决了这个问题。非常感谢！我是所有这一切的初学者，在提问之前花了很多时间阅读、换行、在这里和其他答案网站搜索。
欢迎。很高兴您的问题得到解决。请标记答案，以便其他人知道...