单击时，HTML5下拉菜单不会隐藏在iPhone模拟器中

Question

我有一个这样的菜单：

HTML代码：

            <ul id="menu">                    
                <li><a href="#"><img src="images\menu.png"/></a>
                    <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">OurSpace</a></li>
                <li><a href="#">Corporate</a></li>
                    <li><a href="#">Business Units</a></li>
                    <li><a href="#">Office Locations</a></li>
                <li><a href="#">Global Expertise</a></li>
                    <li><a href="#">Human Resources</a></li>
                    <li><a href="#">Business Tools</a></li>
                <li><a href="#">Services</a></li>
                    </ul>
                </li>                   
            </ul> 

CSS：

     #menu
     {    
        margin: 0;  
        height: 35px;                     
        list-style: none;     

     }

     #menu li
     {
        float: left;
        padding: 0 0 10px 0;
        position: relative;         
     }

     #menu a
     {
        float: left;
        height: 20px;
        padding: 0 10px;
        color: #000;
        font: 12px/25px Arial, sans-serif, Helvetica;
        text-decoration: none;               
     }

     #menu li:hover > a
     {
        color: #000;
     }

     #menu li:hover > ul
     {
        display: block;
     }

        /* Sub-menu */
     #menu ul
     {
        list-style: none;
        margin: 0;
        padding: 0;
        margin-left: 10px;
        width: 300%;
        display: none;
        position: absolute;
        top: 35px;
        left: 0;
        z-index: 99999;                 
        background: #D7DBDB;            
     }

     #menu ul li
     {
        float: none;
        margin: 0;
        padding: 0;
        display: block;
        box-shadow: 0 2px 0 #ffffff;
     }       

     #menu ul a
     {  
        padding: 10px;
        height: auto;
        line-height: 1;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
     }

     #menu ul a:hover
     {
        //background: #0186ba;
        background-image: -webkit-linear-gradient(top, #DBD9D9, #B8B2B2);
        box-shadow: 0 0 3px 0 #ffffff;

     }           
     #menu ul li:first-child a:hover:after
     {
        border-color: #04acec; 
     }         

     #menu:after
     {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
     }         

在悬停时，菜单会在浏览器中打开，并在我们离开后隐藏。但同样不适用于iPhone模拟器。点击，菜单打开但永远保持在那里。只有在我点击其他标签/主题元素时它才会隐藏。

Answer 1

答案很简单。

根据说，手机没有悬停状态。遗憾的是，一切都是通过点击完成的。

把它想象成你要在手机上移动你想要移动页面，而不是在页面上移动光标。

Answer 2

您可以添加一个计时器以在x秒后隐藏菜单，但您无法为手机和平板电脑创建悬停状态，因为Jamie Hutber解释得很好。