0

我有一个这样的菜单：

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

4

2 回答 2

0

答案很简单。

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

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

于 2013-09-13T06:48:22.157 回答
0

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

于 2013-09-13T07:30:37.230 回答