I am learning to do a classification navigation similar to the left side of jingdong home page, which requires that the mouse can slide obliquely from category a to category b to find out the correct solution of each big bull at the front?

  javascript, question

图片描述

The desired effect is shown in the figure, but the code I wrote has the following problems: 1. when the mouse slides diagonally along the red arrow to the category b area, category b is hidden. How to write to allow the mouse to enter category a and slide obliquely from area a to area b, where category b is not hidden and always displayed?
2. When sliding from Category A to Category B in parallel, Category B is also hidden! Why is this happening? How should the code be modified here?
3. there is a solid line at the intersection of category a and category b how to cancel it? Is z-index wrong? How should I write it so that the solid line can be canceled?
Additional: when the div of class=”box-sort “and the div of id=”float_boxbooks” are kept equal and relatively independent (area a and area b are relatively independent), how can the code be modified to ensure that the div of id=”float_boxbooks “is not hidden when the mouse slides from the span area of id=”spanbooks” to the div area of id=”float_boxbooks “along the red arrow? Don’t want to make the structure of father and son.
The code I wrote is as follows. Please explain the specific reason for the error. How should standard code be written? Can you elaborate on this for my younger brother? Thank you, Daniel, …………! ! ! ! 😀
http://jsbin.com/xiticuk/edit? html,output

Link description

<! DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
 <script  type="text/javascript">
 
 $(document).ready(function () {
 
 var newpositionbooks = $("#div_probooks").position();
 $("#float_boxbooks").css("position", "absolute");
 $ ("# float _ boxbooks"). css ("left", newpositionbooks.left plus 115);  //Distance to left
 $ ("# float _ boxbooks"). css ("top", newpositionbooks.top plus 2);  //Distance to Top Margin
 $("#spanbooks").mouseenter(function () {
 $("#float_boxbooks").show();
 });
 $("#float_boxbooks").mouseleave(function () {
 $("#float_boxbooks").hide();
 });
 $("#libooks").mouseleave(function () {
 $("#float_boxbooks").hide();
 });
 
 
 })
 
 
 </script>
 <style>
 
 
 .box-sort_title:hover{
 border: 2px solid #f23b09;   width: 100px;  border-right: none;  height:30px;  background-color: #ffffff;  bracket
 .box-sort_title a {text-decoration: none;  bracket
 .box-sort_title {z-index:9999;  position:absolute;  bracket
 .box-sort_title {
 left: 3px;
 position: absolute;
 z-index: 10;
 bracket
 .box-sort_content span {
 margin: 0 16px;
 bracket
 .span-rows span {
 display: inline-block;
 letter-spacing: normal;
 vertical-align: top;
 bracket
 a {font-family:"Microsoft Yahei";  bracket
 ol, ul, li ,a{
 list-style: outside none none;  font-family:"Microsoft Yahei";
 bracket
 
 .item-list .subitem { float:left;   width:630px;   padding:0px 4px 0px 2px;  bracket
 .item-list .subitem dl { border-top:1px solid #EEE;   padding:6px 0px;   overflow:hidden;   zoom:1;  bracket
 .item-list .subitem .fore1 { border-top:none;   width: 610px;  bracket
 .item-list .subitem dt { float:left;   width:60px;   line-height:22px;   text-align:right;   padding:3px 6px 0px 0px;   font-weight:700;   color:#E4393C;  bracket
 .item-list .subitem dt a { color:#E4393C;   text-decoration:underline;  bracket
 .item-list .subitem dd { float:left;   width:480px;   padding:3px 0px 0px;   overflow:hidden;  bracket
 .item-list .subitem dd em { float:left;   height:14px;   line-height:14px;   padding:0px 8px;   margin-top:5px;   border-left:1px solid #CCC;  bracket
 .item-list .subitem dd em a, .item-list .cat-right dd a { color:#666;   text-decoration:none;  bracket
 .item-list .subitem dd em a:hover, .item-list .cat-right dd a:hover { font-weight:normal;   text-decoration:underline;  bracket
 .item-list .cat-right { float:right;   width:210px;  bracket
 .item-list .cat-right dl { width:194px;   padding:6px 8px;  bracket
 .item-list .cat-right dd { padding-top:6px;   line-height:22px;   overflow:hidden;   padding:3px 0px 0px;  bracket
 .item-list .cat-right dt { padding:3px 6px 0px 0px;   font-weight:700;   color:#E4393C;  bracket
 .item-list .cat-right dd a:hover { color:#666;  bracket
 </style>
 </head>
 <body>
 <div class="box-sort" monkey="cool">
 <ul class="m span-rows box-sort_content box-sort_last">
 <li id="libooks">
 < span id = "span books" class = "box-sort _ title" > < a href = "book.htm" id = "div _ books" > books < /a >, < a href = "//MVD.jd.com/"target = "_ blank" > audio < /a></ a >  < span > < a href = "http://MVD.jd.com/"> literature </a > </span > < span > < a href = "https://www.bookbub.com/"> English original </a > </span > < a href = "http://MVD.jd.com >  "> novels < /a></span > < a href =" http://gen.lib.rus.ec/"> economy </a > </span > < a href =" http://MVD.jd.com/"> philosophy/religion </a > </span > < a href =" http://MVD.jd.com/"> family and parenting </a > </span >
 </li>
 </ul>
 </div>

<div id=”float_boxbooks” style=”display:none; border:2px solid #f23b09; background:#fefefe; z-index:9989; position:relative;” >

<div class="item-list clearfix">
 
 <div class="subitem">
 <dl class="fore1">
 < dt><a href="# "> mainstream < /a></dt >
 < DD > < em > < a href = "#" > free < /a></ em > < em > < a href = "#" > dreams </a > </em > < em > < a href = "#" > trouser </a > </em > < em > < a href = "#" > shops </a > </em > < em > < a href = "#" > literature </a > </a >  Em><em><a href="# "> manage < /a></em><em><a href="#" > read VIP</a></em><em><a href="# "> read VIP</a></em><em><a href="#" > read VIP</a></em></dd >
 </dl>
 <dl class="fore2">
 < dt><a href="# "> electronics < /a></dt >
 < dd><em><a href="# "> pop < /a></em><em><a href="#" > classical music < /a></em><em><a href="# "> rock rap < /a></em><em><a href="#" > jazz blues </a > </em > < a href = "#" > country ballads </a > </em > < em > < a href = "
 </dl>
 <dl class="fore3">
 < dt><a href="# "> audio < /a></dt >
 < dd><em><a href="# "> music < /a></em><em><a href="#" > movies < /a></em><em><a href="# "> educational videos < /a></em><em><a href="#" > games < /a></em></dd >
 </dl>
 <dl class="fore4">
 < dt > art < /dt >
 < dd><em><a href="# "> novel < /a></em><em><a href="#" > literature < /a></em><em><a href="# "> youth literature < /a></em><em><a href="#" > biography < /a></em><em><a href="# "> art < /a></em></dd >
 </dl>
 <dl class="fore5">
 < dt > humanities and social sciences < /dt >
 < dd><em><a href="# "> history < /a></em><em><a href="#" > psychology < /a></em><em><a href="# "> politics/military < /a></em><em><a href="#" > Chinese studies/ancient books </a > </em > < a href = "#" > philosophy/religion </a > </em > < em > < a href >
 </dl>
 <dl class="fore6">
 < dt > manage motivation < /dt >
 < dd><em><a href="# "> economy < /a></em><em><a href="#" > finance and investment < /a></em><em><a href="# "> management < /a></em><em><a href="#" > motivation and success < /a></em></dd >
 </dl>
 <dl class="fore7">
 < dt > life < /dt >
 < dd><em><a href="# "> family and parenting < /a></ em > < a href =" # "> travel/map < /a></em><em><a href="#" > cooking/food < /a></em><em><a href="# "> fashion/beauty < /a></em><em><a href="#" > home </a > </a >  Em><em><a href="# "> marriage and gender < /a></em><em><a href="#" > entertainment/leisure < /a></em><em><a href="# "> fitness and health < /a></em><em><a href="#" > animation/humor < /a></em><em><a href="# "> sports/sports < /a></em></dd >
 </dl>
 <dl class="fore8">
 < dt > technology < /dt >
 < dd><em><a href="# "> popular science < /a></em><em><a href="#" > it < /a></em><em><a href="# "> architecture < /a></ em > < em > < a href =" # "> medicine </a > </em > < em > < a href =" # "> industrial technology </a > </a >  Em><em><a href="# "> electronics/communications < /a></em><em><a href="#" > agriculture and forestry < /a></em><em><a href="# "> science and nature < /a></em></dd >
 </dl>
 <dl class="fore9">
 < dt > children < /dt >
 < dd><em><a href="# "> children < /a></em><em><a href="#">0-2 years < /a></em><em><a href="#">3-6 years < /a></em><em><a href="#">7-10 years < /a></em><em><a href="#">11-14 years </a > </em >
 </dl>
 <dl class="fore10">
 < dt > education < /dt >
 < dd><em><a href="# "> teaching aids < /a></em><em><a href="#" > exams < /a></em><em><a href="# "> foreign language learning < /a></em></dd >
 </dl>
 <dl class="fore11">
 < dt > other < /dt >
 < dd><em><a href="# "> original English book < /a></em><em><a href="#" > hong kong and Taiwan book < /a></em><em><a href="# "> reference book < /a></em><em><a href="#" > package book < /a></em><em><a href="# "> magazine/periodical < /a></em></dd >
 </dl>
 </div>
 
 </div>
 </div>
 
 
 
 
 </body>

</html>

Nested structure

1. Maintain the following structure: the parent classification is relatively positioned, and the child classification is absolutely positioned. Even if the mouse is moved into the subcategory, it is still included in the parent category in the DOM tree.hoverThe status is still valid.

< parent classification >
 < parent title > </parent title >
 < subcategory > </subcategory >
 </parent classification >
 
 Parent Category: hover Subcategory {
 display: block;
 bracket

2. The sameOne

3. The parent title is relatively positioned, and the border is set up at the top, left and bottom.z-indexSetting is greater than subcategory; The subcategory is repositioned so that the parent title covers a portion of the border.

Implementation of Nested StructureJS is not required..

Parallel structure

< container >
 < parent classification list >
 < category A></ category a >
 ...
 </parent classification list >
 < child parent class list >
 < subcategory of category a > </subcategory of category a >
 ...
 </subcategory list >
 </container >
  1. When the mouse hovers over a parent category, the corresponding child category is displayed according to the index (by addingClassControls the style and display of the current parent-child classification and removes non-current parent and child classifications.Class)

  2. The control style and displayed are removed only when the mouse moves out of the outermost containerClass

Only when the mouse enters the container, it is ensured that only one parent category is highlighted and its corresponding child category is expanded. Only when the mouse leaves the container can the highlighted and displayed state be switched and the state be completely cleared.

This structure needs to write two events, the parent classmouseenterAnd containersmouseleave.

Examples:
https://jsfiddle.net/imys/cs2dx7hs/

Independent structure

clipboard.png

As shown in the figure, the submenu inside actually contains a parent menu item that overflows the container, blocking the corresponding parent menu item when the submenu is displayed.

Need to add to parent categorymouseenterAnd sub-sorting containersmouseleaveEvent, since the two are independent of each other, the display needs to calculate the position of submenu display.

I have run out of skills and have finished my old job.