将悬停菜单转换为触摸设备（jsFiddle）

Question

用于运行演示的jsFiddle链接：http://jsfiddle.net/dahAG/

为了使这个悬停菜单在触摸设备上兼容，它需要具有一个功能，通过允许用户（在触摸设备上）按下触摸设备上的任何地方，在触摸设备上按下菜单后折叠菜单屏幕外的菜单。目前，在触控设备上，打开菜单后折叠菜单的唯一方法是再次按下菜单。实现这一目标的最佳方法是什么？

这个悬停菜单只使用CSS3过渡效果，没有JavaScript - 但我很乐意整合一些，如果这是首选方法。

的 HTML

<section onclick="">
    <nav class="menu left" aria-haspopup="true" aria-controls="p1"><img src="images/submenu.gif" alt="">
        <ul id="p1">
            <li class="current"><a href="index.html">Products</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Services</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Demonstrations</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Menus</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Layouts</a><b></b></li>
            <li aria-haspopup="false"><a href="index.html">Contact</a><b></b></li>
            <li class="last" aria-haspopup="false"><a href="index.html">Privacy</a><b></b></li>
        </ul>
    </nav>
</section>

的 CSS

@media only screen and (max-width:880px) {
    .menu {
        width:200px;
        }
    .menu.center {
        margin:0 auto;
        text-align:left;
        }
    .menu.right {
        margin:0 0 0 auto;
        text-align:left;
        }
    .menu img {
        display:block;
        }
    .menu ul li {
        display:block;
        margin-bottom:-40px;
        -webkit-transition:0.5s;
        -moz-transition:0.5s;
        -o-transition:0.5s;
        transition:0.5s;
        }
    .menu ul li:last-child {
        margin-bottom:0;
        }
    .menu ul li.current {
        display:block;
        z-index:10;
        }
    .menu:hover ul li {
        margin-bottom:0;
        }
    }