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.

Answer 2

You can do this using :beforeand :afterpseudo elements, to create two triangles :

.main-navigation ul ul:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.main-navigation ul ul:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}

You just have to set the correct right value for both to make them fit to what you need.

Live exemple