Gmailのようなログアウト

Question

Gmailのようなサインアウトメカニズムがあります。ユーザー名（右上）にカーソルを合わせると、「ログアウト」リンクを含むメニューが表示されます。ユーザ名はフローティングリストにあり、スライドアウトするメニューは内側のリストにあります（フローティングではありません）。スライドアウト/インはjQueryを使用して実行されます。

これは、行うことになっているものである：

• ユーザ名がオンに推移したとき、内側メニューが（目に見えるようになる）を滑落。
• マウスが内側のメニューに行くと、内側のメニューが表示されたままになります。
• マウスが他の場所に移動している場合は、内側のメニューが元に戻ります（目に見えなくなります）。

これは、現在何をするかです：ユーザ名がオンに推移したとき

• インナーメニューが滑り落ちます。
• カーソルがユーザー名から離れているときは、カーソルがどこにあるかにかかわらずメニューが上にスライドします。

知覚ソリューション：私はカーソルが内側のリストの上にある、オープン内側のリストを維持するかどうかを確認するどこかif句があるはずと信じて、それは私が困惑なる部分です。 EDIT

：

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：

01ここは、現在のコードです

$('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

ユーザー名アンカーを終了してドロップダウンにカーソルを置く必要があるときに問題が発生します。単純な解決策は、aの代わりにホバーセレクタをliに変更することです。ドロップダウンの上にホバーしている間も、終了しません。