CSS手機導航

Question

我在準備手機導航時遇到了一些困難。通過下面的代碼，我試圖通過菜單項實現一些基本的下拉列表。

問題是此導航是基於懸停屬性，而不是點擊屬性。 所以當我使用移動設備點擊菜單時，我同時點擊其中的一個菜單項。 （因爲沒有辦法使用手指懸停我相信：D） 我可以以某種方式模擬點擊行爲只使用CSS？ 或者任何簡單的方法來改變我的代碼與js一起工作？

http://jsfiddle.net/hr6e69kp/

我有以下HTML：

<div class="menu"> 
    <ul class="menuLinks"> 
     <li> 
      <a href="#O-nas" id="aboutUsLink">O nas</a> 
     </li> 
     <li> 
      <a href="#Aktualnosci" id="newsLink">Aktualności</a> 
     </li> 
     <li> 
      <a href="#Klienci-i-Partnerzy" id="clientsAndPartnersLink">Klienci i Partnerzy</a> 
     </li> 
     <li> 
      <a href="#Media" id="mediaLink">Media</a> 
     </li> 
     <li> 
      <a href="#Kontakt" id="contactLink">Kontakt</a> 
     </li> 
    </ul> 
</div> 

和CSS：

@media (max-width: 470px) { 
    .menu { 
     position: relative; 
     min-height: 40px; 
     z-index:10; 
    } 

    .menu ul { 
     background:url("/Images/iconmonstr-menu-icon-128.png") no-repeat; 
     width: 80px; 
     height:40px; 
     padding: 5px 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     left: -100px; 
     color: white; 
    } 

    .menu li { 
     display: none; /* hide all <li> items */ 
     margin: 0; 
     color: #0096ff; 
    } 

    /*.menu li a, .menu li a:hover { 
     color: #0096ff; 
    }*/ 

    .menu .current { 
     display: block; /* show only current <li> item */ 
    } 

    .menu a { 
     display: block; 
     color: white; 
     text-align: left; 
    } 

    .menu .current a { 
     background: none; 
     color: white; 
    } 

    /* on nav hover */ 
    .menu ul:hover { 
     background:url("/Images/iconmonstr-menu-icon-128.png") no-repeat; 
     padding: 50px 50px 0 0; 
    } 

    .menu ul:hover li { 
     display: block; 
     margin: 0; 
     background-color:black; 
    } 

    .menu ul:hover .current { 
    background: url(/Images/arrow.png) no-repeat 10px 7px; 
    } 
} 

Answer 1

我不知道如何使用CSS，但使用jQuery我相信你會只想附加一個點擊事件到你的菜單div來顯示孩子ul。你會想顯示移動：沒有​​到UL在CSS中，而不是鋰項目做這種方式

$(".menu").on("click", function(){ 
    $(this).children("ul").show(); 
}); 

一個基本的例子 http://jsfiddle.net/jessikwa/60sxq4pj/