Menu em html e css

Olá galera, eu queria saber como eu posso fazer um menu em html e css que ao clicar em um ícone esse menu apareça mas em cima desse menu um seta em direção ao ícone, assim como o menu que aparece ao clicarmos no ícone de configurações na barra do Facebook. eu até fiz o menu com listas do html e css mas ele aparecia quando passasse o mouse por cima e quando mas como quando o mouse não está ele desaparece ele somente aparecia e desaparecia rapidamente, não era igual esses outros menus que é preciso clicar no ícone e ai sim o meu aparece e quando clicar fora do menu ele desaparece mas não desaparece quando o mouse sai fora do menu. Se puderem me ajudar porque eu realmente preciso desse menu até mesmo porque ele está no projeto em imagem de como ficaria a minha aplicação e achei que seria mais fácil implementar mas tentei e não consegui. Muito obrigado!