Как сделать меню сайта с картинками?

Задача такая - при наведении на пункт меню "каталог" - появились 3 картинки с разделами каталога по которым можно было бы перейти в соответствующий раздел (вот типа как тут).

Начал гуглить, написал такое:

http://codepen.io/nikki4/pen/MJdWwz

<ul>
<li>
<a class="imagetip" href="#">Каталог</a>
 
<a class="catlink" href="1">
<img class="catfoto" src="http://res.grouple.ru/uploads/pics/06/53/649.jpg" /></a>

<a class="catlink" href="2">
<img class="catfoto" src="http://desktopov.ru/mini/201409/80691.jpg" /></a>

<a class="catlink" href="3">
<img class="catfoto" src="http://hd4desktop.online/images/m/a-landscape_island_nature_beach-92572.jpg" /></a>
</li>
</ul>

.catlink  {
    visibility: hidden;
}
.imagetip:hover ~ .catlink {
    visibility: visible;
}

Проблема в том, что как только убираю курсор с .imagetip - все опять скрывается. Как сделать чтобы не исчезало?