如何創建可摺疊的文件夾？

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中所說的內容。你可以截圖並解釋你想如何顯示圖像。