菜单工作正常,显示在父项的下方,具有正确的填充和边距调整,以保证视觉清晰。在Chrome和Edge上,它一直显示在左边。我已经研究了重置边距和填充,但我要么在代码中找不到正确的位置进行重置,要么这不是问题所在。我还查看了设置为relative的不同元素,它们的结果类似(非)。
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;
}
以及一个在Safari和Chrome之间切换时表现出这种行为的JSFiddle。https://jsfiddle.net/NateBarham/st9tuLa3/
发布于 2018-06-04 07:24:09
变化
.main-nav > li {
display: inline;
}
至
.main-nav > li {
display: inline-block;
}
更新的fiddle https://jsfiddle.net/st9tuLa3/2/
https://stackoverflow.com/questions/50671824
复制相似问题