What is the reason why the hover menu on the right side of the hover menu tab, is not displayed?

first of all, it should be implemented: the left menu appears (below it) when the mouse hovers over the catalogue, and this is achieved. Then when the mouse continues to hover over the left menu item, the corresponding floating submenu is displayed on the right side, and the right submenu appears alternately when the left hovering position (left menu item) is moved. But the actual right side submenu does not appear.

< hr >

forgot to mention:

also needs to be implemented:
after the mouse moves away from the left and right side, the whole menu screen disappears except the "catalogue"!
that is, the right side submenu also disappears.
currently, the left menu disappears after the mouse is removed through css.
is there anything wrong with what javascript wrote? Who can change it or give a hint (it"s best to change it first, because you"re not familiar with Javascript)?
the following figure shows that when hovering over the catalogue, the menu below is displayed on the left, but the right is empty:

the code is as follows:


<dl>
<dd>
D
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>

</body>
</html>
Jan.18,2022

look at your js code, only part of the function has been written, not completely written. If you are new to the front end, it is recommended to use jquery or vue to write the effect you want.


you can take a look at the following code
https://codepen.io/ars_qu/pen.

Menu