我想创建一个下拉菜单，但我不确定它是一个下拉菜单还是其他东西，因为我是 HTML 环境的新手。
我想要创建的是
当我单击“印度香料”时，它必须在其中显示另一个下拉菜单，如果我单击“胡椒”，则必须在其下显示另外两个项目。
这里每个选项都应该位于它的父级下面。并且下拉菜单周围不能有边框。我需要设计与图像中相同的下拉菜单。（没有任何边框）
我在这里尝试过一些东西，但我知道这不是正确的设计方式。https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html
在这里我几乎接近我的目标
https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html
谁能指导我解决这个问题...
我想这就是你正在寻找的。您可以自己完成其余的设计工作。检查片段。
$(document).ready(function () {
$('#head__top').on('click', function(){
if($('#innerCollapse').is(':visible')) {
$('#innerCollapse').hide();
}
});
$('#head__sub').on('click', function() {
$('#innerCollapse').fadeToggle(300);
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12">
<h4 id="head__top">
<a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
</h4>
<div class="collapse" id="collapseExample">
<h6 id="head__sub">
<a class="dropdown-item" role="button" aria-expanded="false"
aria-controls="innerCollapse">Pepper
<span class="col-sm-3"></span>
<span class="col-sm-3"></span>
<i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
aria-controls="innerCollapse" style="font-size:18px"></i></a>
</h6>
</div>
<div class="collapse col-sm-3" id="innerCollapse">
<h6>
<a class="dropdown-item">Black Pepper</a>
<a class="dropdown-item">White Pepper</a>
</h6>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>