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
You can do this using :before
and :after
pseudo 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