Question

第三个菜单选项应该仅在我选择第二个选项时出现，但是当我选择第一个选项时它已经出现。

要查看错误，请在下面的链接中转到顶部菜单，然后选择“LocalizarPeças”选项 - ＆gt; “GM（雪佛兰）”，第三个菜单已经出现，但只应在选择其中一个选项时出现，例如“Agile”。

http://adessopecas.com.br/index.php?route=common/home

我的CSS是：

#menu .dropdown:hover > .dropdown-menu {
    display: block;
}
#menu ul ul ul.dropdown-inner {
  left: 100%;
  top: 0;
  display: none;
}
#menu .nav li {
  position: relative;
}
#menu ul ul li:hover ul.dropdown-inner {
  display: block;
}


#list-unstyled ul ul ul.dropdown-inner2 {
  left: 100%;
  top: 0;
  display: none;
}
#list-unstyled .nav li {
  position: relative;
}
#list-unstyled ul ul li:hover ul.dropdown-inner2 {
  display: block;
}

李在html中是：

<ul class="dropdown-menu sub-menu dropdown-inner">
    <li>Option 1-1</li>
        <ul class="dropdown-menu sub-menu dropdown-inner2">
            <li>Option 1-1</li>
            <li>Option 1-1</li>
            <li>Option 1-1</li>
        </ul>
    <li>Option 2-1</li>
    <li>Option 3-1</li>
</ul>

Answer 1

这是因为这条规则的发生：

#menu ul ul li:hover ul.dropdown-inner {
    display: block;
}

你基本上是在悬停时同时向所有孩子展示。相反，你需要一些干净但更具体的东西，利用direct child selector。

#menu ul li:hover > ul {
    display: block;
}

摆脱：

#menu .dropdown-inner ul {
    display: table-cell;
}

我仍然遇到CSS和下拉菜单

1 个答案: