html - CSS 动画导致一些与高度和填充相关的问题

Question

http://jsfiddle.net/QsCNc/

#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #1A1E2E;
border-bottom: 1px solid #ccc; 
height: 15%;
display: inline;
position: fixed;
z-index: 2;
}

#nav ul {
list-style: none;
width: 100%;
margin: 0 auto;
padding: 0; 
display: inline;
}

#nav li {
float: right; 
display: inline;
position: relative;
right: 20%;
top: 49%;
}

#nav li a {
display: block;
padding: 50px 15px;
text-decoration: none;
font-weight: bold;
color: white;
height: 50px;
/* animation */
z-index: 2;
position: relative;
transition: color 1s;
}

#nav li a:hover {
color: #c00;
}

#nav li a:before {
color: #C00;
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
content: " ";
position: absolute;
top: -250px;
left: 0;
transition: top 1s;
z-index: -1;
border-bottom: 1px solid #F0F0F0;
border-left: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
border-top: 1px solid #C00;
}

#nav li a:hover:before {
top: -70px;
}

上面是我网站代码的链接。最好在整个窗口中查看，因此这里有一个指向实际站点的链接:http://adamshort.site50.net

我在导航方面遇到了问题。当您将鼠标悬停在它们上方时，会播放一个很好的动画。但是，您可以将鼠标悬停在选项卡下方很远的地方，动画仍会播放。我不知道如何让动画保持原样，但在低于它时无法激活它，显然这有点奇怪。

我已经尝试更改我的填充、高度等，但这会改变下拉的白色标签的长度，我不希望这样。

Answer 1

您的菜单 anchor 有 50 像素的内边距和 50 像素的高度，这两者对于 anchor 本身都是不必要的。

试试这个:

http://jsfiddle.net/isherwood/QsCNc/4

#nav li a {
    padding: 50px 15px 0;
    height: 20px;
}
#nav li a:hover:before {
    height: 220%;
}
#nav li a:before {
    transition: all 1s;
}

调整以适应。