Question

我正在与Orchard合作开发基于Bootstrap的主题。菜单导航CSS代码看起来像这样，并且在将鼠标悬停在第二级菜单上时工作正常。

.dropdown-menu .dropdown-menu {
  left: 100% !important;
  top: 0;
}

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

.dropdown-menu i {
  line-height: 1.42857143;
}

现在，我希望此下拉菜单的所有级别仅在点击时打开，因为这不适用于基于触摸的设备。当我更改＆＃39;：将鼠标悬停在：焦点时，当点击第二级nav-bar时，所有内容都会关闭。我真的不是一个熟练的html / css编码器，所以我不确定这是如何工作的。我假设dropdown是此ul类的名称和此dropdown-menu div此菜单所在的名称，但我不确定，因为所有代码都已生成...此外，对不起，我的英语不太好。感谢。

Answer 1

正如您在此示例中所看到的： http://codepen.io/HerrSerker/details/wMdgER/ :focus不起作用，因为您无法使用CSS3 - 就像使用:hover一样，并且您只能拥有一个:focus的元素。所以你没有:focus记忆

灵魂就是用一些有记忆的东西建立一个解决方法。您应该使用带有:checked选择器和相邻组合器（A + B）的单选按钮。

见这里：http://codepen.io/HerrSerker/pen/obWBVG

然后你必须隐藏单选按钮并让标签完成工作

nav ul label {
  display: block;
}
nav ul > li > label > input:checked + ul {
  display: block;
}
nav ul.lvl-2 {
  display: none;
}

<nav>
  <ul class="lvl-1">
    <li>
      <label for="id-lvl1-01">
        <input type="radio" name="lvl-1" id="id-lvl1-01" />1
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-01-01">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-01-02">
              <input type="radio" name="lvl-1-1" id="id-lvl2-01-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
    <li>
      <label for="id-lvl1-02">
        <input type="radio" name="lvl-1" id="id-lvl1-02" />2
        <ul class="lvl-2">
          <li>
            <label for="id-lvl2-02-01">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-01" />01</label>
          </li>
          <li>
            <label for="id-lvl2-02-02">
              <input type="radio" name="lvl-1-2" id="id-lvl2-02-02" />02</label>
          </li>
        </ul>
      </label>
    </li>
  </ul>
</nav>

点击时果园多级下拉菜单

1 个答案: