Write a two-level menu on the left side of the Xiaomi website with the jquery plugin

Knowledge Points: Static layout ideas, jquery dynamic layout, code format specification, jquery plug-in calls, mouse swipe two-level menu construction.

HTML code:

        <div id= "Tz_banner" > <ul> <li class= "Firstli" > Mobile phone Card <div class= "Info" > <ul> <li><a class= "title" href = "#" ><span> Xiaomi note2</span><!--meaningless inline element--></a><! --Hyperlink--><a class= "Buy" href= "#" > Shop </a></li> &L T;li><a class= "title" href= "#" ><span> Xiaomi note2</span><!--                            inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!--                            inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!--meaningless inline elements--></a><!--Hyperlinks--><a class= "Buy" href= "#" > Buy </a></li> <li><a class= "title" href= "#" ><i MG src= "Images/1/5.jpg" ><span> Xiaomi note2</span><!--meaningless inline element--></a><!--hyperlink-- <a class= "Buy" href= "#" > Buy </a></li> <li><a class= "title" href= "#" &G T;<span> Xiaomi note2</span><!--meaningless inline element--></a><!-- Hyperlink--><a class= "Buy" href= "#" > Buy </a></li> <li><a class= "title" H ref= "#" ><span> Xiaomi note2</span><!--meaningless inline elements--></a> <!--hyperlinks--><a class= "buy" href= "#" > Shop </a></li> <li><a class= "t Itle "href=" # "><span> Xiaomi note2</span><!--Meaningless inline element--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span>                            <!--inline elements without any meaning--></a><!--hyperlinks--><a class= "buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!                            --inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!-                            -inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!- -inline element without any meaning--></a><!--Hyperlink--><a class= "Buy" href= "#" > Buy </a></li> <li><a class= "title" H ref= "#" ><span> Xiaomi note2</span><!--meaningless inline elements--></a> <!--hyperlinks--><a class= "buy" href= "#" > Shop </a></li> <li><a class= "Ti Tle "href=" # "><span> Xiaomi note2</span><!--meaningless inline elements--></a ><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a Class = "title" href= "#" ><span> Xiaomi note2</span><!--meaningless inline element--  </a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!--the inline element without any meaning-- ></a><!--hyperlink--><a class= "Buy" href= "#" > Buy </a></li> </ul> </div> </li>                            <li class= "Firstli" > Notebook tablet <div class= "info" > <ul> <li><a class= "title" href= "#" ><span> Xiaomi Note2</span                            ><!--inline elements without any meaning--></a><!--hyperlinks--><a class= "buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi NOTE2&LT;/SPAN&GT;&L t;!                            --inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "title" href= "#" ><span> Xiaomi note2</span><!-                            -inline element without any meaning--></a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> <li><a class= "Title "href=" # "><span> Xiaomi note2</span><!--meaningless inline elements--><                    /a><!--hyperlink--><a class= "Buy" href= "#" > Shop </a></li> </ul>                </div> </li> <li class= "Firstli" > TV box </li>                <li class= "Firstli" > Routers </li> <li class= "Firstli" > Mobile phone cards </li> <li class= "Firstli" > Notebook tablet </li> <li class= "Firstli" > TV box </li> <li class= "Firstli" > Mobile phone card </li                 > <li class= "Firstli" > TV box </li> <li class= "Firstli" > Headphones </li> </ul> </div>

CSS code:

    <style type= "Text/css" >/*css cascading Style list Landscaping factory */*{margin:0px;padding:0px; Font-family: "Microsoft Jas Black";}    /* Wildcard 1. Unify the default style for all elements 2. Compatibility issues between different browsers */li{list-style:none;/* go to list dot */} body{background: #434343;} a{text-decoration:none;/* Go underline */} #Tz_banner {width:237px;/*px pixel width */height:458px;/* high */Backgrou Nd: #333;/* background */margin:130px 0px 0px 54px;/* upper right left clockwise */position:relative;/* relative positioning reference */} #Tz_banner        . firstli{width:237px;        height:42px;        cursor:pointer;/* Mouse style */font-size:14px;/* font size */text-indent:20px;/* First Line Indent */line-height:42px;/* Row High */ Color: #fff;/* Font color */} #Tz_banner. Firstli:hover{background: #ff9900;}        /* Style after mouse stroke */#Tz_banner. Firstli. info{height:458px;        Background: #fff;        padding-left:10px;        position:absolute;/* Absolute Positioning change position of the box */left:237px;        top:0px;    Display:none;        } #Tz_banner. Firstli. info li{width:248px; Height:77px;        text-indent:0px;        margin-right:15px;    Position:absolute;        } #Tz_banner. firstli. info Li a.title{height:77px;        display:block;/* into block-level elements */float:left;        line-height:77px;        left:0px;    top:0px;        } #Tz_banner. firstli. info li a.title img{margin:16.5px 15px 0px 15px;    Float:left;        } #Tz_banner. firstli. info li a.title span{float:left;        height:77px;    Line-height:77px;color: #222;        } #Tz_banner. firstli. info Li a.buy{width:60px;        Display:block;        Float:right;        margin-top:25px;        border:1px solid #f60;/* Border weight style color */line-height:24px;    text-align:center;/* Text Center */color: #f60;        } #Tz_banner. firstli. Info Li a.buy:hover{background: #f60;    Color: #fff; } </style>

JavaScript code:

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>    <script type="text/javascript">    $("#Tz_banner .firstLi .info").each(function(){        var $li = $(this).find("li");//获取到所有info下面的li        var length =$li.length;//得到info下面所有li的数量        var width = $li.width();//获取li的宽度        var height = $li.height();//获取li的高度        var col = Math.ceil(length/6);//向上取整        $(this).width(col*width);        $li.each(function(i){            var x = Math.floor(i/6);//向下取整            var y = i%6;//取余数            $(this).css({                left:x*width + "px",                top:y*height + "px"            });        });    });    $("#Tz_banner .firstLi").hover(function(){        $(this).find(".info").show();    },function(){        $(this).find(".info").hide();    });    </script>

Write a two-level menu on the left side of the Xiaomi website with the jquery plugin