尽管设置了Z-Index，但子菜单中的下拉不可见

Question

我真的无法理解如何解决这个问题。我正在使用Bootstrap 3，并在顶部添加子菜单功能以及其他自定义CSS。

第二级菜单项仅在子菜单元素可视部分可见，而不在右侧部分可见：

＆＃13;

＆＃13;

 <application
    android:name="com.MyApplication"
    android:allowBackup="false"
    android:icon="@mipmap/logo"
 android:supportsRtl="true"
    android:theme="@style/AppTheme">

＆＃13;

.dropdown-submenu {
  position: relative;
  z-index: 9999999;
}

.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;
  z-index: 9999999;
}

.dropdown-submenu>a:after {
  display: block;
  z-index: 9999999;
  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;
}

＆＃13;

＆＃13;

＆＃13;

你知道如何让菜单可见吗？我的错误在哪里？我在元素中设置了更高的z-index，显示是块，所以我真的不知道如何解决......

提前致谢！

Answer 1

您没有使用正确的选择器进行悬停。这条规则：

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
  z-index: 9999999;
}

应该有这个选择器（仅.dropdown:hover而不是.dropdown-submenu:hover）：

.dropdown:hover > .dropdown-menu {

单独进行此更改会使下拉列表工作：https://codepen.io/anon/pen/eGVQMm

但可能还有其他规则你也应该改变