Css 引导3多级菜单

在根菜单上添加悬停时遇到问题。将鼠标悬停在第一个子菜单上时，将显示所有子菜单。在不到768px的时间内，它就有了小车。我如何解决这个问题，使鼠标悬停在根菜单上工作，当窗口变小时子菜单显示

HTML

更新

只需在

之间添加
。根目录：悬停。下拉菜单{

.root:hover > .dropdown-menu{
    display: block;
}

---

对于768px以下的设备，是否有办法使其在子菜单上“仅垂直”工作？因为您希望它在768以下移动，但是：对于触摸屏，悬停无法正常工作。如果您仍然想这样做，可以尝试。我已在css底部添加了代码。

.dropdown-submenu{
    position:relative;
} 
.dropdown-submenu > .dropdown-menu
{
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
} 
.dropdown-submenu:hover > .dropdown-menu{
    display:block;
}

.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

.dropdown-submenu:hover > a:after{
    border-left-color:#ffffff;
}

.dropdown-submenu .pull-left{
    float:none;
}

.dropdown-submenu.pull-left > .dropdown-menu{
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

.root:hover .dropdown-menu{
    display: block;
}

.root:hover > .dropdown-menu{
    display: block;
}