css Problem - drop-down funktioniert nicht richtig auf iphone/ipad

Ich habe ein css powered drop-down-Menü, das nicht richtig funktioniert auf dem iphone oder ipad.

Es funktioniert wie ich es will auch auf allen anderen Browsern und Geräten, die ich überprüft haben.

Habe ich verengt Sie sich auf die Tatsache, dass ich nicht den Menü-text (z.B. das Wort 'Gesicht') verpackt in href-tags, wie es in der ursprünglichen version des Codes. Das ist es, was den Unterschied macht. Wrap-href-tags um das Wort Gesicht und das Dropdown funktioniert auf ipad/iphone

Natürlich könnte ich einfach das href und getan werden, aber ich weiß wirklich nicht haben wollen, da sonst jeder mit einem touch-screen, die normalerweise haben, Tippen Sie auf das Menü text, um die dropdown-Liste angezeigt werden, ergriffen werden, wohin der link verweist. Die verderben, die ganze Punkt, der in der dropdown-Liste den ersten Platz!

Hier der code:

<div id="dropMenuWrapper">
  <div id="dropMenu">
        <ul class="level1">
        <li class="submenu">Face
            <ul class="level2">
                <li class="subCatodd"><a href="">powder</a></li>
                <li class="subCateven"><a href="">cream</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

Den css:

body {  behavior: url(includes/csshover.htc);}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0; 
padding: 0;
}

div#dropMenu li {
position: relative; 
list-style: none; 
margin: 0; 
float: left; 
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px; 
margin:0 auto; 
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;text-decoration: none;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

Und für die Leichtigkeit, ein jsfiddle: http://jsfiddle.net/VvT6Y/1/

Kann mir jemand zeigen, wie Sie die dropdown funktioniert auch auf iphone/ipad die zimmerreserviereung, ohne das der text ein link?

Vielen Dank im Voraus 🙂

InformationsquelleAutor crazy sarah | 2012-11-27