CSS: Placing an arrow / triangle with border on the top of my drop down menu

Question

Just launched this website (http://dovidoved.org/) and the client wants one of those triangles / arrows on the top of each drop down menu. Problem is the menu has a border aroun

Answer 1

.main-navigation a:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f00;
    position: absolute;
    top: -2px;
    right: -20px;
}

Adjust the padding of li to make triangles fit.