我正在尝试使用这个主题：https://colorlib.com/polygon/sufee/index.html
这是它正在使用的HTML：
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html"> <i class="menu-icon fa fa-dashboard"></i>Dashboard </a>
</li>
<h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown show">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="menu-icon fa fa-laptop"></i>Components</a>
<ul class="sub-menu children dropdown-menu show">
<li><i class="fa fa-puzzle-piece"></i><a href="ui-buttons.html">Buttons</a></li>
<li><i class="fa fa-id-badge"></i><a href="ui-badges.html">Badges</a></li>
<li><i class="fa fa-bars"></i><a href="ui-tabs.html">Tabs</a></li>
<li><i class="fa fa-share-square-o"></i><a href="ui-social-buttons.html">Social Buttons</a></li>
<li><i class="fa fa-id-card-o"></i><a href="ui-cards.html">Cards</a></li>
<li><i class="fa fa-exclamation-triangle"></i><a href="ui-alerts.html">Alerts</a></li>
<li><i class="fa fa-spinner"></i><a href="ui-progressbar.html">Progress Bars</a></li>
<li><i class="fa fa-fire"></i><a href="ui-modals.html">Modals</a></li>
<li><i class="fa fa-book"></i><a href="ui-switches.html">Switches</a></li>
<li><i class="fa fa-th"></i><a href="ui-grids.html">Grids</a></li>
<li><i class="fa fa-file-word-o"></i><a href="ui-typgraphy.html">Typography</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-table"></i>Tables</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="fa fa-table"></i><a href="tables-basic.html">Basic Table</a></li>
<li><i class="fa fa-table"></i><a href="tables-data.html">Data Table</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-th"></i>Forms</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-th"></i><a href="forms-basic.html">Basic Form</a></li>
<li><i class="menu-icon fa fa-th"></i><a href="forms-advanced.html">Advanced Form</a></li>
</ul>
</li>
<h3 class="menu-title">Icons</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-tasks"></i>Icons</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-fort-awesome"></i><a href="font-fontawesome.html">Font Awesome</a></li>
<li><i class="menu-icon ti-themify-logo"></i><a href="font-themify.html">Themefy Icons</a></li>
</ul>
</li>
<li>
<a href="widgets.html"> <i class="menu-icon ti-email"></i>Widgets </a>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bar-chart"></i>Charts</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-line-chart"></i><a href="charts-chartjs.html">Chart JS</a></li>
<li><i class="menu-icon fa fa-area-chart"></i><a href="charts-flot.html">Flot Chart</a></li>
<li><i class="menu-icon fa fa-pie-chart"></i><a href="charts-peity.html">Peity Chart</a></li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-area-chart"></i>Maps</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-map-o"></i><a href="maps-gmap.html">Google Maps</a></li>
<li><i class="menu-icon fa fa-street-view"></i><a href="maps-vector.html">Vector Maps</a></li>
</ul>
</li>
<h3 class="menu-title">Extras</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-glass"></i>Pages</a>
<ul class="sub-menu children dropdown-menu">
<li><i class="menu-icon fa fa-sign-in"></i><a href="page-login.html">Login</a></li>
<li><i class="menu-icon fa fa-sign-in"></i><a href="page-register.html">Register</a></li>
<li><i class="menu-icon fa fa-paper-plane"></i><a href="pages-forget.html">Forget Pass</a></li>
</ul>
</li>
</ul>
这是相当标准的。现在我想添加第二级下拉菜单，即在按钮下面，我想将其项目作为按钮1、按钮2、按钮3
所以我试着把这个HTML放在那里：
<li class="menu-item-has-children dropdown">
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
<ul class="sub-menu children dropdown-menu">
<li>
<a>Button 1</a>
</li>
<li>
<a>Button 2</a>
</li>
<li>
<a>Button 3</a>
</li>
</ul>
</li>
按钮当我点击按钮打开它的下拉列表时，它会关闭父项。我做错了什么？
感谢您的帮助。
解决此问题的唯一方法是添加javascript。
将此添加到您的js文件：
$('.menu-item-has-children .menu-item-has-children a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
参考：
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&堆叠=h
因为您还没有更新任何fiddle。注意你的代码，我发现错误的是你多次提到的class属性
<a href="#" class="active" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-puzzle-piece fa-2x"></i> Buttons</a>
在上面的代码中，你使用了两个类，删除class="active"，然后尝试，希望它能帮助