Javascript 带有CSS的移动菜单

我正在我的网站上添加一个选择菜单，这是一个测试页面 当您在小屏幕上看到右侧的长菜单时，可以看到它是如何变成类似于选择框的。问题是，当我将鼠标移到手机上的菜单上时，菜单列表就会显示出来，如果我不点击任何链接，菜单就会保持展开状态。我怎样才能修复这个问题，如果你点击菜单，它就会隐藏

这是一个屏幕截图，当我用iPhone触摸它时，菜单是如何显示的-

菜单是展开的，不会折叠

我的代码是：

<script>
$('.nav-list-2 > li a').click(function() {
        $(this).parent().find('ul').toggle();
    });​
</script>

<style>



@media (min-width:601px) and (max-width:2024px) {
.current {display:none;}
    }

@media (min-width:200px) and (max-width:600px) {
    .nav-list-right {
        position: relative;
        min-height: 40px;
    }   
    .nav-list-right ul {
        width: 180px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 0;
        border: solid 1px #aaa;
        background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .nav-list-right li {
        display: none; /* hide all <li> items */
        margin: 0;
    }
    .nav-list-right .current {
        display: block; /* show only current <li> item */
    }
    .nav-list-right a {
        display: block;

        text-align: left;
    }
    .nav-list-right .current a {
        background: none;
        color: #666;
    }

    /* on nav-list-right hover */
    .nav-list-right ul:hover {
        background-image: none;
    }
    .nav-list-right ul:hover li {
        display: block;
        margin: 0 0 5px;
    }


    /* right nav-list-right */
    .nav-list-right.right ul {
        left: auto;
        right: 0;
    }

    /* center nav-list-right */
    .nav-list-right.center ul {
        left: 50%;
        margin-left: -90px;
    }

ul.nav-list-2 li a {
    padding: 2px 1px 1px 10px !important;
    background: transparent url("http://ww2.hawaiidiscount.com/Portals/_default/Skins/HD-custom-design-s/images/yellow-nav-bullet.png") no-repeat scroll left 7px ;
}

ul.nav-list-2 li a:hover {
    padding: 2px 1px 1px 10px !important;
    background: transparent url("http://ww2.hawaiidiscount.com/Portals/_default/Skins/HD-custom-design-s/images/yellow-nav-bullet.png") no-repeat scroll left 7px ;
}

.current {
    padding: 7px 0px 0px 30px !important;
            background: url("http://ww2.hawaiidiscount.com/Portals/0/icon-check.png") no-repeat 10px 7px;
                border-bottom: none !important;

}

</style>

---

你是如何在手机菜单上滑动鼠标的？你只是说你正在缩小页面吗？单击菜单图标旁边的菜单中的第一个链接。我正在缩小页面并在其上滑动鼠标，但我没有看到这种行为。您使用的是什么操作系统和浏览器？Firefox。它可以在桌面上正常工作，但不能在移动设备上正常工作。移动设备的上下文是什么？这就是我要问的。您通常不会在移动设备上使用鼠标。