A arrow hover effect that's centered to the nav link boxes
===

I have a site I built in Wordpress that has a gray boxes around the links that when you hover over them they turn blue and an arrow drops down from the box. My problem is they are placed absolutely so if the Nav link is longer or shorter the arrow isn't centered to nav box. I was able to achieve the effect with pure CSS. Here is my code.

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;
    }
