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

后端 未结 2 2144
傲寒
傲寒 2021-02-07 10:05

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

2条回答
  •  醉梦人生
    2021-02-07 10:43

    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

提交回复
热议问题