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>全部分类   
        <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>