果園多層次的下拉僅

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>