基于CSS的Dropdown不显示iOS设备

Question

我有一个网站的下拉菜单,该网站在桌面浏览器上运行良好但在iPad或iPhone设备上不起作用.但它确实可以工作,但适用于Android设备.我有一个类似的网站具有相同的导航结构,它在该网站上完美运行.

该URL是www.aiimconference.org.这里是导航结构和CSS的示例.这里也是完美的网站.我在这个网站上使用了相同的结构.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

我无法确认这一点，但我怀疑您是否不使用左侧定位来隐藏下拉导航

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

隐藏它并且

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

为了展示它，它应该适用于 mobile safari 和 mobile chrome。