3D变换向下翻转CSS子菜单

我使用了一个3D下拉子菜单的教程。

在这里找到的文件:

上下翻转菜单(Zip文件)http://www.webdesignermag.co.uk/tutorial files/issue - 217 -教程- files/

我修改了我的用法，效果很好。

这是小提琴:http://jsfiddle.net/yx8qc/6/

代码如下:

<div class="menu_holder">
    <ul class="nav">
  <li class="main_menu"><a href="#">MENU</a>
          <div class="sub">
            <ul><li><a href="#">Home</a></li>
<li><a href="#">ONE</a></li>
<li><a href="#">TWO</a></li>
<li><a href="#">THREE</a></li>
</ul>       </div>
    </li>
</ul>
  </div>

CSS

.menu_holder {
    background-color: #bd4832;
    text-align: center;
    -moz-perspective: 80px;
    -webkit-perspective: 80px;
    -o-perspective: 80px;
    perspective: 80px;
    position: fixed;
    right: 0;
    top: 0;
    height: 64px;
    z-index: 900;
    width: 100%;
}
.menu_holder ul {
    padding: 0;
    margin: 0;
}
.menu_holder a {
    color: #fff;
    font-family:'League Gothic', sans-serif;
    font-size: 2em;
    font-weight: normal;
}
.menu_holder ul li {
    display: inline;
}
.main_menu {
    width: 100%;
}
ul.nav li a {
    display: inline-block;
    padding: 0 1em;
    letter-spacing: 2px;
}
.menu_holder ul.nav {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.sub {
}
.menu_holder ul.nav div {
    width: 100%;
    position:absolute;
    background-color: #d3634e;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -moz-transform-origin: 0px 0px;
    -moz-transform: rotateX(-90deg);
    -webkit-transform-origin: 0px 0px;
    -webkit-transform: rotateX(-90deg);
    -o-transform-origin: 0px 0px;
    -o-transform: rotateX(-90deg);
    transform-origin: 0px 0px;
    transform: rotateX(-90deg);
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
    /* inner shadow */
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
    /* inner shadow */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55);
    /* inner shadow */
}
.menu_holder ul.nav li:hover div {
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.menu_holder ul.nav li:hover > a {
    color:#115b64;
}
.menu_holder ul.nav div.sub {
    width: 100%;
    display: block;
}

悬停时向下翻转，悬停时向上翻转。

在桌面运行效果很好。

在触摸设备上，菜单向下翻转，但为了让它向上翻转，你必须触摸主链接以外的地方。

目标:

让它在触摸设备上工作。点击"菜单"将下拉子菜单。点击相同的主"菜单"项将把它翻转回来。

任何有关触摸设备的帮助或线索都非常感谢。

谢谢。

<div class="menu_holder">
    <ul class="nav">
        <li class="main_menu"><a href="#"><label for="toggle-1">MENU</label></a>
            <input type="checkbox" id="toggle-1">
            <div class="sub">
                <ul>
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">ONE</a>
                    </li>
                    <li><a href="#">TWO</a>
                    </li>
                    <li><a href="#">THREE</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
label {
    cursor: pointer;
}
input[type=checkbox]:checked ~ div {
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}