可折叠文件夹

问题：我能够使用css创建一个可折叠的文件夹。

但是，如果文件夹转到第二页，我无法确定如何按下该文件夹。 目前，CSS如何工作，如果在其下面的文件夹下面有一个文件夹，它将重叠。 我希望能够将文件夹推到另一个文件夹下面。

我提供了一个关于我所说的话的图像：

#primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:12px; line-height:32px; padding:0 15px; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#fff; padding:0 } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } 

 
 
 
 Controlled Substance Materials 
 
Sub Menu 1
 
Sub Menu 2
 
Sub Menu 3
 
Sub Menu 4 
 
Deep Menu 1 
 
Sub Deep 1
 
Sub Deep 2
 
Sub Deep 3
 
Sub Deep 4
 
 
 
Deep Menu 2
 
 
 
Sub Menu 5
 
 
 
 
 
 
 
 Controlled Substance Materials 
 
Sub Menu 1
 
Sub Menu 2
 
Sub Menu 3
 
Sub Menu 4 
 
Deep Menu 1 
 
Sub Deep 1
 
Sub Deep 2
 
Sub Deep 3
 
Sub Deep 4
 
 
 
Deep Menu 2
 
 
 
Sub Menu 5
 
 
 
 
 
 
 
 Controlled Substance Materials 
 
Sub Menu 1
 
Sub Menu 2
 
Sub Menu 3
 
Sub Menu 4 
 
Deep Menu 1 
 
Sub Deep 1
 
Sub Deep 2
 
Sub Deep 3
 
Sub Deep 4
 
 
 
Deep Menu 2
 
 
 
Sub Menu 5
 
 
 
 
 
 
 
 Controlled Substance Materials 
 
Sub Menu 1
 
Sub Menu 2
 
Sub Menu 3
 
Sub Menu 4 
 
Deep Menu 1 
 
Sub Deep 1
 
Sub Deep 2
 
Sub Deep 3
 
Sub Deep 4
 
 
 
Deep Menu 2
 
 
 
Sub Menu 5
 
 
 
  

Answer 1

如果我真的只想使用CSS，我会怎么做。 我在CSS中添加了注释来解释我在做什么。

 * { font-family: sans-serif; } .collapsible { list-style-type: none; height: 24px; /* Fixed value for height */ overflow: hidden; /* hides the Sub-items */ background: rgba(0, 0, 0, 0.1); padding: 6px; width: 160px; } .collapsible:hover { cursor: pointer !important; /* For easier user interaction */ height: auto; /* On hover, the full menu is revealed */ } .collapsible li { font-size: 16px; line-height: 26px; /* Line height is just greater than the height of the menu before hover to make sure it's hidden */ } .collapsible li:first-child { padding-bottom: 0.6em; } .collapsible li:not(:first-child) { padding-left: 1.2em; } .folder-title { font-weight: bold; } 

 
 
  Folder Title
 
Sub-item 1
 
Sub-item 2
 
Sub-item 3
 
 
 
  Folder Title
 
Sub-item 1
 
Sub-item 2
 
Sub-item 3
 
 
 
  Folder Title
 
Sub-item 1
 
Sub-item 2
 
Sub-item 3
 
 
 
  Folder Title
 
Sub-item 1
 
Sub-item 2
 
Sub-item 3