Dropdown profile settings with image

I’m trying to build a dropdown with the profile picture of an user but i don’t know how with the tools materialize owns.

This is my code:

<ul id="profileopt" class="dropdown-content">
 <li><a href="#!">My profile</a></li>
 <li><a href="#!">Settings</a></li>
 <li><a href="#!">Achievements</a></li>         
 <li class="divider"></li>
 <li><a href="#!">Logout</a></li>           
</ul>

<ul class="right">
<li><a class="dropdown-button grey-text text-darken-1" href="#!" data-constrainwidth="false" data-beloworigin="true" data-activates="profileopt">Perfil <img style="height:60px;" class="circle" src="./webimg/yuna.jpg"></a></li>
</ul>

This is the result:

What I want to get:

Does anybody know hoy I could get it?

[Isprago94]

I’ll do it. But it would be perfect if you decide yo add “images in dropdown” as you did with “Images in select” for this type of menus and other uses.

[thanhtrixx]

Html: <li><a href="#!" data-activates="user-dropdown" class="profile-dropdown-button"><img src="assets/yuna.jpg" class="responsive-img circle profile-img"/></a></li> Css: img.profile-img { height: 36px; position: relative; top: 14px }