一个箭头悬停效果'；s以导航链接框为中心

我在Wordpress中创建了一个网站，该网站的链接周围有一个灰色框，当你将鼠标悬停在这些框上时，它们会变成蓝色，并从框中下拉一个箭头。我的问题是，它们是绝对放置的，所以如果导航链接更长或更短，箭头就不会居中到导航框。我能够用纯CSS来达到这个效果。这是我的密码。

HTML

<div id="nav">
            <div class="navwrapper">
                    <div class="main-nav">
                        <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
                    </div>
                    <div class="clearfix"></div>
            </div>
        </div>

CSS

.main-nav ul a{
    color: #0f0f0f;
    text-decoration: none;
}

.main-nav ul li a{
    color: #0f0f0f;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #efefef;
    padding:  10px;
}

.main-nav ul a:hover{
    color: #fff;
    text-decoration: none;
    background-color: #5dbbe0;
     -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
}

.main-nav ul li {
    float: left;
    margin:  25px 0 0 15px;
}

.main-nav ul a:hover:after{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 18px;  
    top: 36px;
    text-align: center;
    border-width:10px 10px 0;
    border-style: solid;  
    border-color: #5dbbe0 transparent;  
    display: block;
}