CSS-basiertes Dropdown-Menü zeigt keine iOS-Geräte

Question

Ich habe ein Dropdown-Menü für eine Website, die auf dem Desktop-Browser funktioniert, aber nicht auf iPad- oder iPhone-Geräten funktioniert. Es funktioniert zwar, funktioniert aber auf Android-Geräten. Ich habe eine ähnliche Seite mit der gleichen Navigationsstruktur und es funktioniert perfekt auf dieser Seite.

Die URL ist www.aiimconference.org. Und hier ist ein Beispiel für die Nav-Struktur und CSS. Auch hier ist die Seite, die perfekt funktioniert. Ich habe die gleiche genaue Struktur auf dieser Seite verwendet. www.aiim.org.

<ul> 
<li><a href="/conference">Home</a></il> 
<li class="expandable"><a href="/conference">Program</a> 
    <ul> 
     <li class="expandable"><a href="/conference">Program</a></il> 
     <li class="expandable"><a href="/conference">Program</a></il> 
    </ul> 
</il> 
<li class="expandable"><a href="/conference">Connect</a></il> 
<li class="expandable"><a href="/conference">Register</a></il> 
<li class="expandable"><a href="/conference">Sponsors</a></il> 
<li class="expandable"><a href="/conference">Venue</a></il> 
</ul> 


.mainNav li.expandable > a /* dropdown */{ 
    background: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/dropdown.jpg") no-repeat center right; 
    padding-right: 16px; 
    padding-bottom: 4px;} 

.mainNav ul li.expandable li.expandable > a /* flyout */ { 
    background-image: url("/assets/sites/aiimconference/www/conf2013/styles/css_img/layout/flyout.png") !important; 
    background-repeat: no-repeat; 
    background-position: 95% 50%; 

. mainNav{ 
    margin: 0 auto; 
    text-align: center; 
    background: #007287 url(/assets/sites/aiimconference/www/conf2013/images/layout/main- nav-bkgd.jpg) repeat-x bottom; 
    font-family: franklin-gothic-urw-condensed, arial, sans-serif; 
    font-size: 20px; 
    line-height: 20px; 
    text-transform: uppercase; 
    margin-top: 30px; 

.mainNav ul ul li:hover > a { 
    background-color:#006372;} 

.mainNav span { 
    display:block; 
    position:absolute; 
    right:9999px; 
    top:-35px;} 

.mainNav ul li:hover > ul { 
    left:-1px; 
    top:30px; 
    z-index:-1;} 
.mainNav ul ul li:hover > ul { 
    left:100%; 
    top:auto; 
    margin-top:-31px; /*margin-left:-10px;*/ 
    z-index:10;} 

Answer 1

Ich kann das nicht bestätigen, aber ich vermute, wenn stattdessen links Positionierung der Verwendung der Drop-Down-Navigation zu verstecken, anstatt Sie

verwenden

visibility: hidden; 
height: 0; 
opacity: 0; 

es zu verbergen und

visibility: visible; 
height: auto; 
opacity: 1; 

zu zeigen Es sollte mit mobiler Safari und mobilem Chrom funktionieren.

Answer 2

Soweit ich weiß, sollten Sie den CSS-Selektor "hover" nicht auf mobilen Geräten verwenden, da dies durch den Cursor ausgelöst wird, den Sie nicht haben, da Sie auch keine Maus haben. Sie könnten tippen und halten, aber ich bin mir nicht sicher.

Ein besserer Weg, um damit umzugehen, ist die Verwendung von Medienabfragen, um sie anzuzeigen und sie nur auf mobilen Geräten in einer bestimmten Weise zu aktivieren. Ich empfehle Ihnen, entweder das Dropdown-Menü zu aktivieren, indem Sie auf das übergeordnete Element klicken, oder das Menü anders anzuzeigen (mit dem bereits geöffneten Untermenü oder etwas Ähnlichem).