Jquery仿京东分类导航层简单实现

<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var alink01 = $(".item > ul");
alink01.hover(function () {
//alert div
var divId = $(this).find("div").attr("id");
var div = $("#" + divId); //要浮动在这个元素旁边的层
div.css("position", "absolute"); //让这个层可以绝对定位
var self = $(this); //当前对象
div.css("display", "block");
var p = self.position(); //获取这个元素的left和top
var x = p.left + self.width(); //获取这个浮动层的left
div.css("left", x + 45); //20140916修改
div.css("top", p.top);
div.show();
//mouseenter
$(this).removeClass("unfocus").addClass("focus");
},
function () {
var divId = $(this).find("div").attr("id");
var div = $("#" + divId); //要浮动在这个元素旁边的层
div.css("display", "none");
//mouseleave
$(this).removeClass("focus").addClass("unfocus");
});
});
</script>

<div class="leftbody">
<div class="item">
<span>全部分类</span>
<ul class="focus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>
<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>

<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>

<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>
<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>
<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>
<ul class="unfocus">
<li ><strong>内科</strong> <br />
消化内科 内分泌及免疫
</li>
</ul>

</div>
</div>