CSS :after element relative position

Question

I want to add an arrow effect to a list item (li) on it's hover but it's position does not act relative to list item. When I add left: 50% attiribute to :after element, every individual arrow become centered to ul instead of it's list item. Without left: 50% attiribute, arrows are under their list item's but not centered. So I'm a litte bit stucked here.

Here is my CSS:

nav.main-nav 
{
    position: absolute;
    z-index: 100;
    width: 980px;
}
    nav.main-nav > ul > li
    {
        position: relative;
        display: table-cell;
        list-style-type: none;            
        vertical-align: middle;
     }
     nav.main-nav > ul > li:hover
     {
         background-color: #304a60;
     }

          nav.main-nav > ul > li:hover:after
          {
                content: "";
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #304a60;
                position: absolute;
                bottom: -10px;
                left: 50%;
           }

Any help will be appriciated, thanks.

Solution

I would put the arrow on the a itself, which you can set to display: block and position: relative. Then you have your positioning context for a:after.