Html 用于多级菜单的引导悬停

我正在尝试实现由“悬停”触发的多级引导菜单。第一级工作正常。然而，在更深层次上，菜单将所有内容都显示为“可见”。需要帮助自定义CSS，以便悬停可以工作，并且只显示所需的菜单项

.dropdown-menu .sub-menu {
    left: 100%;
    right: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: 0px;
}

我的问题如下图所示。谢谢

（尝试在此处搜索类似问题，但找不到我要查找的内容）

使用

类似于：

.dropdown-menu li:hover > .sub-menu {
    visibility: visible;
}

演示：