Make a tree directory with CSS

Most of the Sobo Electronics is a tree directory, when the mouse is clicked, expand the subdirectory; when you click the primary directory again, turn off the subdirectory. It seems that Jiazi is very fast and simple. Make more ways to make this tree directory, recently used CSS to easily control the "display" and "hidden" attribute principles of the object, and I feel that I feel such a tree directory with CSS, simple, code It is also relatively small, so write it out and gives the netizens to make one in order to do it when needed. First look at the following example: When you use the mouse to click on the main directory, pull out the corresponding subdirectory, then click, and restore the original shape, and its effect is exactly the same as the directory effect on the Sobi Electronics.

Catalog of the previous mouse click

Directory that is expanded after the mouse click

Method: I first copy the code that produces this effect as follows, then combines the code to make a method: