Как создать складную папку?

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:

Chrome:

Answer 1

Для того, чтобы достичь того, чего вы хотите, вы должны удалить эту строку из CSS в dropdown-content2 :

position: absolute; 

Что касается

Я с трудом выравнивая текст с изображением.

Я не могу понять, какого результата вы хотите.

Вы можете проверить, что я сказал в этом JSFiddle. Вы можете сделать снимок экрана и объяснить, как вы хотите, чтобы изображение отображалось.