Javascript 如何在左侧下拉菜单中打开子菜单

在下面的下拉菜单中，当我们将鼠标悬停在项目上时，子菜单将向右打开。但是，我希望它向左边打开

代码如下：

html:

js:

然后是代码笔链接：

请告诉我怎么做？

您可以修改。下拉子菜单：悬停>。下拉菜单css规则：

显然，您需要在左侧留出空间来容纳：

.mn-sidebar {
  margin-left: 600px;
  ...
}   

根据以下OP注释进行编辑：

.dropdown-submenu:hover > .dropdown-menu {
    display: list-item;
}
.dropdown-submenu:nth-child(2):hover > .dropdown-menu,
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
    display: list-item;
    left: -310px;
}

---

您是否尝试过在下拉菜单类中使用左键：-310px？您想在主菜单的左侧打开第一和第二个子菜单，还是只打开第二个子菜单？我的意思是，我希望上面的项目在右侧打开，下面的项目在左侧打开。@XahedKamal:所以，对于大型控股公司，我希望其所有子菜单仍然在右侧打开，对于乐队，我希望它的所有子菜单都在左边打开。稍后我会将整个下拉列表放在中间。是的，但它对这两个项目都适用。现在，对于它显示在左边的两个项目，我想要大控股，它的所有子菜单仍然在右边打开，而对于乐队，它的所有子菜单都在左边打开，然后你需要离开。下拉子菜单：hover>。下拉菜单原样，只有target。下拉子菜单：nth-child2:hover>。下拉菜单。查看我的编辑请查看我更新的代码笔。基本上这就是我想要的。因此，右侧的下拉列表应该在左侧显示其子菜单。一切都搞砸了哦那真是一团糟；现在情况完全不同了。所以我认为你的要求是有两个分开的边栏，每个边栏包含一个项目列表，一个浮动到左边，一个浮动到右边。如果是这种情况，那么您需要完全重新构建标记，并从那里开始。我最初认为你需要。让我知道你到底想去哪里。是的，我想弄清楚为什么我右边的下拉菜单在悬停时没有正确显示。

$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
    event.preventDefault();
    $(this).children('.child').slideToggle('slow');
    $(this).find('span').toggle();
});

.dropdown-submenu:hover > .dropdown-menu {
    display: list-item;
    left: -310px;
}   

.mn-sidebar {
  margin-left: 600px;
  ...
}   

.dropdown-submenu:hover > .dropdown-menu {
    display: list-item;
}
.dropdown-submenu:nth-child(2):hover > .dropdown-menu,
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
    display: list-item;
    left: -310px;
}