Question

我试图摆脱我添加负上边距（以便在我的导航栏上方可见）到我的＆lt; li>项目。这是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行添加到＆lt; li> item（不仅仅是悬停）就像魅力一样。谢谢：）。

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

Answer 1

问题是转换属性，您正在转换所有内容，请尝试以下操作：

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

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

小提琴：http://fiddle.jshell.net/xv6mk/3/

添加负上边距后导航项闪烁

1 个答案: