Меню работает правильно, отображается под родительским элементом с правильными настройками отступов и полей для наглядности.На 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/