我正在尝试通过一种下拉菜单为我的用户制作注销系统。当用户将鼠标悬停在他的名字上时，会打开一个下拉菜单，当他离开 div 时，它会被 jQuery 隐藏。我曾尝试使用 mouseenter 和 mouseleave 函数来执行此操作，但它似乎不起作用。请参考我的 jsfiddle 文件http://jsfiddle.net/b6K2R/
以下是我的代码：-
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;
}
请帮我...！在此先感谢... :>