如何创建可折叠的文件夹？

Question

问题：我想创建一个包含多个文件夹的文件夹。但是，我无法让它正确。

我想打开子文件夹，将其余内容向下推。除此之外，我很难将文本与图像对齐。

以下是我所做的。

.dropdown { 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown2{ 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown3 { 
 
    /*position: relative; 
 
    */display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown-content2 { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown-content3 { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 357px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    padding: 12px 16px; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown3:hover .dropdown-content3 { 
 
    display: block; 
 
} 
 

 
.dropdown2:hover .dropdown-content2 { 
 
    display: block; 
 
}

<td style="font-size:12px; vertical-align:center"> 
 
\t \t \t \t \t <div class="dropdown"> 
 
\t \t \t \t \t \t <span style="color:#4284b0;">Controlled Substance Forms</span> 
 
\t \t \t \t \t \t <div class="dropdown-content"> 
 
\t \t \t \t \t \t \t <div class="dropdown2"> 
 
\t \t \t \t \t \t \t \t <div><img style="width:40px" src="images/Files-icon24.png" alt="Description of Quality Measures" class="float-left"/ > 
 
\t \t \t \t \t \t \t \t <span style="color:#4284b0; vertical-align:center">Controlled Substance Forms</span></div> \t 
 
\t \t \t \t \t \t \t \t \t <div class="dropdown-content2"> \t 
 
\t \t \t \t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Controlled Substances Prescribing Policy 02-07-2017.docx" target="_blank">Controlled Substances Prescribing Policy</a></p> 
 
\t \t \t \t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Controlled Substance Treatment Agreement 02-07-2017.docx" target="_blank">Controlled Substance Treatment Agreement</a></p> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/HGH Treatment Agreement 02-07-2017.docx" target="_blank">HGH Treatment Agreement</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Appendix A. Opioid Risk Tool.pdf" target="_blank">Appendix A. Opioid Risk Tool</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Appendix B. PADT.pdf" target="_blank">Appendix B. PADT</a></p> 
 
\t \t \t \t \t \t \t <p><a href="Downloads/PhyDownloads/Testosterone Treatment Agreement 02-07-2017.docx" target="_blank">Testosterone Treatment Agreement</a></p> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </td> \t

IE：

铬：

Answer 1

为了实现你愿意，你必须从dropdown-content2的CSS删除这条线是什么：

position: absolute; 

至于

我有一个很难对准与图像的文本。

我不明白你想要什么结果。

您可以测试我在JSFiddle中所说的内容。你可以截图并解释你想如何显示图像。