Bootstrap子菜单放置错误

Question

第二级子菜单被放置在第一级子菜单的第一元素旁边，当具有较少的第二级子菜单元素的第一级子菜单的较低元素时，由于鼠标悬停在菜单之外，用户不能导航到新的第二级子菜单。

如何将第二级子菜单放在每个第一级子菜单所选元素的旁边？

这里是JSFiddle，检查元素，并尝试导航到它们的子菜单:内存设备，打印机，笔记本电脑包，投影仪等。

HTML

Code too large to be displayed here. Check JSFiddle

谢谢!

Answer 1

只需添加以下规则：

.dropdown-menu > li { position: relative; }

您需要的是具有position: relative的第一级子菜单，这样当下一级定义position: absolute; top: 0;时，它的顶部就是直接父菜单的顶部。