仿淘宝鼠标悬浮一个区域，该区域显示一个层级块

效果图：鼠标悬浮到我的淘宝，然后就显示浮层

代码：

.h_item_functs{display:none; }
.h_shopInfo_Div{height:130px;width:200px;padding-left:10px;padding-right:10px;z-index:1000;position:absolute;right:0px;top:0px;}
.h_shopInfo_Div span{color:#ffffff;}
.h_in_sdn{background:#fefefe;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3;margin-top:-1px;}
.h_in_sdn span{color:#000000;}
.h_in_sdn .h_item_functs{display:block; }
.h_shopName {float:right;width:150px;display:inline-block;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;color:#ffffff;}


<div class="h_shopInfo_Div">
<div id="h_shopInfo" style="line-height:80px;">头像，店铺名称</div>
<div class="h_item_functs">
<span style="margin-left:10px;" id="h_shop_nick">小武松</span>
<a href="javascript:;" id="btnLoginOut" style="float:right;margin-right:10px;">退出</a>
</div>
</div>

$("#h_shopInfo").on("mouseover", function () {
$(this).parent().addClass("h_in_sdn");
$(".h_shopInfo_Div").on("mouseleave ", function () {
$(".h_shopInfo_Div").removeClass("h_in_sdn");
});
});