点击时 HTML5 下拉菜单未隐藏在 iPhone 模拟器中答案

【问题标题】：HTML5 drop down menu not hiding in iPhone simulator on click点击时 HTML5 下拉菜单未隐藏在 iPhone 模拟器中
【发布时间】：2013-09-13 06:37:56
【问题描述】：

我有一个这样的菜单：

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 模拟器。单击时，菜单会打开，但会永远保留在那里。只有当我点击其他标签/锚元素时它才会隐藏。

【问题讨论】：

那可能是因为iOS设备不支持hover。

标签： iphone html css

【解决方案1】：

您可以添加一个计时器以在 x 秒后隐藏菜单，但您不能像 Jamie Hutber 解释的那样为手机和平板电脑创建悬停状态。

【讨论】：

【解决方案2】：

答案很简单。

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

想象一下，如果您将手指移动到手机上，您会想要移动页面，而不是在页面上移动光标。

【讨论】：