Create a sub-menu with jquery

I have always wanted to customize common front-end components. I have made a preliminary attempt to learn the custom css and jquery components.

 

The previously written navigation bar is relatively simple, and sub-menus cannot be nested yet. Now we need to make up for this shortcoming.

The effect is just right.

View the demo.

 

Html structure:

First Sub-menu 1 first second third fourth sub-Menu 2 first second third fourth sub-menu 3 first second third fourth fifth View Code

Css style:

{: ;:;:;:;:;}View Code

Jquery logic:

Sub_nav: $ sub_nav = $ (). children ('ul 'timer = $ (). mouseover (timer! = $ (). Mouseleave (timer = window. setTimeout (}, 800} View Code