Как сделать, чтобы при наведении мышки открывалась форма ?

вопрос

Как сделать при наведении курсора, чтобы открывалась форма с нужным кодом в login.tpl

Пример привел картинками:

Как сделать, чтобы при наведении мышки открывалась форма ?

Вот код login.tpl того файла:

[not-group=5]
<div class="user-menu">
                <div class="hello">
                    Привет, <a href="#" class="ajax-link">{login}</a>!
                </div>
                                    <div class="avatar">
                                    <img src="{foto}" alt="{login}" />
                    </div>
                                <div class="sub-menu">
                    [admin-link]<a href="{admin-link}" target="_blank">Админпанель</a>[/admin-link]
                                <a href="{profile-link}">Мой профиль</a>
                                <a href="/katalog/my">Мои фирмы</a>
                                <a href="/katalog/add/">Добавить фирму</a>
                                <a class="thide lexit" href="{logout-link}">Выход</a>
                                 </div>
    
[/not-group]

Вот возможные стили, которые получилось вытянуть:

.user-menu {
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: 50px;.UniNav_item
    cursor: pointer;
    line-height: -0.5;
}

.hello {
    display: inline-block;
    vertical-align: top;
    height: 34px;
    padding: 16px 10px 0 14px;
}

a.ajax-link {
    text-decoration: none;
    border-bottom: 1px dashed;
}

.avatar {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    width: 50px;
    overflow: hidden;
}

.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}