За меня не нужно выполнять мою работу

Мне нужно знать ориентировочное расположение списка в блоке и надо ли ему прописывать
dispaly:none.
Ведь у меня будет такого рода конструкция (ниже), а значит список по умолчанию должен не отображаться, по клику на заголовок с классом "button" делать список видимым. Также при выборе элемента списка, сам список должен сворачиваться, также список сворачивается и по клику в любой участок страницы (при условии, что список при этом открыт)
<div class="profile">
<a href="#" class="button">
<span class="profile_name">Сергей</span>
<span class="profile_arrow"></span>
</a>
<div class="profile_menu">
<ul>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Appear Offline</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>