Gmail-like Выход

Question

У меня есть механизм Gmail-подобного выхода, так что когда вы наводите курсор на имя пользователя (вверху справа), он скользит вниз по меню, которое содержит ссылку «Выйти».Имя пользователя находится в плавающем списке, а выдвигающееся меню - во внутреннем списке (не плавающем).Выдвижение / ввод выполняется с помощью jQuery.

Это то, что он должен делать:

• Внутреннее меню скользит вниз (становится видимым), когда имя пользователя наведено;
• если мышь переходит во внутреннее меню, внутреннее меню должно оставаться видимым;
• если мышь зависает в другом месте, внутреннее меню должно сдвинуться назад (становится невидимым).

Вот что он делает в данный момент:

• Внутреннее меню скользит вниз, когда наведено имя пользователя;
• , когда курсор находится вне имени пользователя, меню скользит вверх -независимо от того, где находится курсор.

Воспринимаемое решение: я считаю, что где-то должно быть предложение if, которое проверяет, находится ли курсор во внутреннем списке и сохраняет ли внутренний список открытым, и эточасть, которая ставит меня в тупик.

РЕДАКТИРОВАТЬ: Вот текущий код:

HTML:

<ul id="user_spot">
    <li><a href="#"><span class="username">username</a>
        <ul id="user_spot_links">
            <li><a href="/home/sign?out=y">Sign Out</a></li> <br />
        </ul>
    </li>
</ul>

CSS:

ul#user_spot li {
    float:left;
    position:relative;
}
ul#user_spot_links {
    position:absolute;
    top:20px;
    display:none;
}
ul#user_spot_links li {
    float:none;
    clear:both;
}

JS:

$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
    return false;
}, function() {
    // this is where I believe the needed code should be"
    $('ul#user_spot_links').slideUp('slow'); 
});

Answer 1

Вам не нужен JS для этого.

Проверьте эту скрипку: http://jsfiddle.net/PaKnc/

В сущности, UL, который скользит вниз, является дочерним элементом LI, над которым вы наводите курсор.Вы можете управлять свойствами CSS дочернего элемента в CSS.

Например:

#parent #child {
   style1;
}

#parent:hover #child {
   style2;
}

Здесь style1 и style2 могут быть совершенно разными.В нашем случае мы пользуемся этим, изменяя свойство display.

Answer 2

Проблема в том, что когда вам нужно выйти из якоря имени пользователя, наведите курсор на выпадающий список.Простое решение состоит в том, чтобы просто изменить селектор при наведении на li вместо a.Тогда вы не выйдете из него, даже если будете зависать над выпадающим списком.