果园多层次的下拉仅

Question

我与在基于引导的主题果园工作。菜单导航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; 
} 

，我想这个下拉菜单，因为这不是基于触摸的设备上工作仅在点击后打开的各个层面。当我将'：hover'改为：focus时，当点击第二级nav-bar时，一切都会关闭。我真的不是一个熟练的HTML/CSS编码器，所以我不确定这是如何工作的。我相信dropdown是ul类的名称和div此菜单位于dropdown-menu，但我不知道，因为生成所有的代码......此外，我对我不是那么伟大的英语对不起。 谢谢。

Answer 1

正如你可以看到在这个例子： http://codepen.io/HerrSerker/details/wMdgER/ :focus不起作用，因为你不能用泡沫像你CSS3-可以:hover做，你只能有一个元素与:focus。所以，你没有:focus内存

的soultion是建立的东西，有一个存储器的解决方法。您应该在: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>