jquery - 导航栏设计

我从事应用程序工作，几乎完成了每个编码和逻辑部分，但是现在我要在导航栏上添加一些效果，例如Example，但是我对CSS不太满意，所以我该如何在项目中做到这一点

我目前正在这样做

.nav ul li a {
color: #666666;
display: inline-block;
font-family: DinC;
padding-bottom: 60px;
padding-top: 30px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 84px;
}

然后悬停

.nav ul li a:hover, .nav ul li a.active{
background-image: url(images/hover.png);
background-position: left bottom;
background-repeat: repeat;
-webkit-transition: all 1s ;
-moz-transition: all 1s ;
-ms-transition: all 1s ;
-o-transition: all 1s ;
transition: all 1s ;}

但是通过它，它会立即出现，例如示例链接

这是我的导航图像

最佳答案

那是一刹那。从技术上讲，您可以使用许多单独设置动画的<div>或伪元素来完成此操作，但实际上，您将不得不提出一种更简单的效果。