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 に答える