下拉子菜单在菜单顶部打开

Question

我有一个嵌套的下拉菜单。 问题是当我单击子菜单上的插入符号时，子菜单项出现在下拉列表的顶部。 这是我展开第一个菜单时下拉菜单的样子：

当我单击子菜单员工的插入符号时：

这是我的 CSS：

 .dropdown-submenu:hover >.dropdown-menu { display: block; }.dropdown-submenu { position: relative; }.dropdown-submenu a::after { transform: rotate(-90deg); position: absolute; right: 6px; top: .8em; }.dropdown-submenu.dropdown-menu { top: 0; margin-left: .1rem; margin-right: .1rem; }.dropdown-item.dropdown-toggle::before { display: none; } Here is my HTML:

 <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">Filter<b class="caret"></b></a> <ul class="dropdown-menu"> <li class="dropdown dropdown-submenu"> <a class="dropdown-toggle" data-toggle="dropdown">Employees</a> <ul class="dropdown-menu"> <li class="dropdown-item"> Employees Item 1 </li> <li class="dropdown-item"> Employees Item 2 </li> </ul> </li> <li> <a>Contractors</a> </li> <li> <a>Customers</a> </li> </ul> </div>