html - 添加负上边距后导航元素闪烁

Question

在我向

元素添加负上边距(以便它在我的导航栏上方可见)后，我试图摆脱闪烁。这是 JSFiddle 的链接:http://fiddle.jshell.net/xv6mk/ .
和代码以防万一。
HTML:

<ul>
        <li>Main</li>
        <li>Subpage 1</li>
        <li>Subpage 2</li>
        <li>Subpage 3</li>
        <li>About</li>
</ul>

和 CSS:

ul {
display: inline;
list-style: none;
}
li {
font-size: 16px;
display: inline-block;
margin-right: -6px;
padding: 16px;
cursor: pointer;
display:inline-block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
li:hover {
background: white;
color: #74DF00;
border-top: 10px solid #525458;
margin-top: -10px;
}

我真的很感激帮助:)。

编辑:将这 2 行添加到 < li > 元素(不仅是悬停)就像魅力一样。谢谢 :) 。

border-top: 10px solid #848484;
margin-top: -10px;

Answer 1

问题出在过渡属性上，您正在过渡所有内容，请尝试以下操作:

transition-property: color, border-top, background;

只需添加前缀即可支持跨浏览器。

fiddle :http://fiddle.jshell.net/xv6mk/3/