如何使用HTML和CSS将选项卡和子选项卡转换为下拉项和子项

Question

在HTML和CSS和“响应式”网页设计中，如何将选项卡转换为下拉项。我不想使用引导程序之类的任何第三方库。我在该项目中做了很多棱角分明的工作。我也不想使用棱角材料。我的项目中有这个特定要求，我有html TABS，有些标签中有SUB TABS。我希望选项卡能够响应。我希望选项卡（TABS和SUB TABS）在移动断点上成为下拉菜单。我在下面的链接中获得了示例，但其中没有子选项卡，很明显，当转换为移动视图时，它无法显示子项，而子项则没有。我试图通过包含子选项卡来修改示例，但对我而言不起作用。如果他们可以使用子标签修改以下示例，并在移动设备视图上转换为下拉菜单项和子项，则表示赞赏。这是到目前为止我发现的最好的链接。

https://codepen.io/jpkempf/pen/Awxbo

$(document).on('click', 'li', function(){

  $('li').removeClass('active');
  $('ul').toggleClass('expanded');
  $(this).addClass('active');
});