在css中设置箭头,在CSS中使用CSS在当前页面下添加小箭头

我有一个菜单，其中一个用于默认状态，另一个用于悬停/活动状态。当前页面就像悬停/活动状态，但在其下方有一个箭头。我无法弄清楚让箭头出现的最佳方式。我尝试了一个边框图像，但由于按钮大小根据菜单项的长度而有所不同，所以看起来并不正确。这里是我用来创建两种不同风格的当前CSS：在CSS中使用CSS在当前页面下添加小箭头

.main-nav li a {

float: left;

font-size: 15px;

color: #333;

padding: 10px 15px;

text-shadow: 1px 1px #DDD;

border-right: 1px solid rgba(0, 0, 0, .3);

border-left: 1px solid rgba(255, 255, 255, .5);

background-image: -webkit-gradient(

linear,

left top,

left bottom,

color-stop(0.0, #B3D09E),

color-stop(0.75, #A0B88E)

);

background-image: -o-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);

background-image: -moz-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);

background-image: -webkit-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);

background-image: -ms-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%);

background-image: linear-gradient(to bottom, #B3D09E 0%, #A0B88E 75%);

transition: all 300ms;

-moz-transition: all 300ms;

-o-transition: all 300ms;

-webkit-transition: all 300ms;

}

.main-nav .current-menu-item a, .main-nav .current-page-ancestor a, .main-nav li a:hover {

color: #FFF;

background-image: -webkit-gradient(

linear,

left top,

left bottom,

color-stop(0, #043420),

color-stop(1, #075A36)

);

text-shadow: none;

background-image: -o-linear-gradient(bottom, #043420 0%, #075A36 100%);

background-image: -moz-linear-gradient(bottom, #043420 0%, #075A36 100%);

background-image: -webkit-linear-gradient(bottom, #043420 0%, #075A36 100%);

background-image: -ms-linear-gradient(bottom, #043420 0%, #075A36 100%);

background-image: linear-gradient(to bottom, #043420 0%, #075A36 100%);

}

我想避免使用jquery，如果可以的话。我觉得应该有一些方法来使用CSS而不是使用jQuery来将图像放在按钮的中心。我是否在每个按钮下放置一个不可见的div，并将箭头图像居中并显示在当前页面上？

这就是我给我的菜单所遵循的。他们没有使用相当正确的术语。图像的“活动”部分是当前页面样式：