一種のドロップダウンで、ユーザーのログアウト システムを作成しようとしています。ユーザーが自分の名前にカーソルを合わせると、ドロップダウンが開き、div を離れると、jQuery によって非表示になります。mouseenter と mouseleave 関数でこれを実行しようとしましたが、機能していないようです。http://jsfiddle.net/b6K2R/にある私の jsfiddle ファイルを参照してください。
以下は私のコードです:-
HTML
<div id="ppic" style="float:right;position:relative;" class="top" href="#">
<img style="float:left;" src="https://graph.facebook.com/100005546162517/picture"
width="25" height="25">
<span style="float:left;margin:4px 0 0 5px;">
Deval
</span>
<div class="submenu">
<ul class="root">
<li ><a href="settings" >Settings</a></li>
<li ><a href="Logout" >Logout</a></li>
</ul>
</div>
</div>
jQuery :-
$(document).ready(function(){
$(".submenu").hide();
});
$("#ppic").mouseenter(function(){
$(".submenu").show();
});
$("#ppic").mouseleave(function(){
$(".submenu").hide();
});
CSS :-
.submenu
{
background: #fff;
position: absolute;
top: 41px;
right: 0px;
z-index: 1;
width: 125px;
margin-left: 10px;
padding: 0px 0 5px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.top li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 10px 15px 10px 20px;
cursor: pointer;
text-decoration:none;
outline:none;
}
.top li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}
私を助けてください...！よろしくお願いします... :>