css - 如何创建可折叠文件夹？

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

即:

Chrome :

Answer 1

为了实现您想要的效果，您必须从 dropdown-content2 的 CSS 中删除这一行:

position: absolute;

至于

I am having a hard time aligning the text with the image.

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

你可以测试我在这个JSFiddle里面说的.您可以截取屏幕截图并说明您希望如何显示图像。