Formatar menu DropDown CSS

Front-end
, ,
#1

Gostaria de colocar esse chapeuzinho cinza que fica em cima do menu dropdown

Mas não estou conseguindo meu menu DropDown

HTML

                     <div class="dropdown">
                    <div class="conteudo" id="dropbtn"><li><a href="#">PRODUTOS</a></li></div>
                    
                    
                    <div class="dropdown-content2">
                    <li><a href="#">Camisetas</a></li>
                    <li><a href="#"> Bermudas</a></li>
                    <li><a href="#">Calças</a></li>
                  


                </div>
                     </div>

CSS

/**DropDown Produtos**/
    
    #dropbtn {
        background-color: #00008B;
        color: White;
       
        border: none;
        cursor: pointer;
       
    }
    
    
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content2 {
        display: none;
        position: absolute;
        background-color: #00008B;
       width: 110px;
       margin-top: 8px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
          margin-left: 4px;
          border-bottom:2px solid white;
            border-left:2px solid white;
            border-right:2px solid white;
    }

    .dropdown-content2 a {
        color:white;
        padding: 8px 12px;
        text-decoration: none;
        display: block;
    }

    
    
     .dropdown-content2 a:hover{
        color:white !important;
    font-size: 12pt;
    }
    
          
    .dropdown:hover .dropdown-content2 {
        display: block;
    }
#2

Cara, não sei se isso é certo fazer, talves eu esteja complicando algo que seja simples de fazer, porém você pode criar um elemento triangular e posicionar ele com relative e absolute.

Espero ter ajudado, porém se alguém tiver uma solução mais simples também fiquei curioso, vou estudar um pocuo aqui e ver se consigo achar algo.

#3

Use o elemento especial ::after ou ::before.
Com ele vc adiciona um conteúdo e posiciona em qualquer lugar do elemento pai. Depois só rotacione o elemento especial.
Pesquisa sobre esses dois pseudos elementos.

#4

blz origado Randi-Maldonado