Criar submenu ao clicar em imagem

Então, estou tentando criar um submenu com opções quando o usuário passa o link em cima da imagem, porém não estou conseguindo, qual é o jeito certo de fazer?

Ao clicar no link (link-login) que é uma imagem colocada com css, abre um menu abaixo da imagem com 5 opções de link

<div class="nav-container">
 <nav>
 <ul class="desktop-nav">
 <li>
 <a href="" class="link-logo"></a>
 </li>
 <li>
 <a href="">Charm Points</a>
 </li>
 <li>
 <a href="">Ranking</a>
 </li>
 <li>
 <a href="">Colaboradores</a>
 </li>
 <li>
 <a href="">Blog</a>
 </li>
 <li>
 <a href="">Eventos</a>
 </li>
 <li>
 <a href="">Suporte</a>
 </li>

 <li>

 <!--<a href="" class="link-search"></a>-->

 <form method="get" action="" class="search">
 <input name="boxsearch" type="search-text" placeholder="" />
 </form>

 </li>
 <li>
 <a href="" class="link-bag"></a>
 </li>

 <li>
 <a href="" class="link-login"></a>
 </li>
 </ul>

 </nav>

</div>

	 

.link-login {
 background: url('avatar.png');
 background-repeat: no-repeat;
 display: block;
 background-position: center;
 background-size: 20px;
 height: 44px;
 width: 20px;
}

.link-login:hover {

 position: relative;
 display: inline-block;
 margin-top: 50px;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 padding: 12px 16px;
 z-index: 1;
}