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/