6

我有一个网站的下拉菜单，它在桌面浏览器上运行良好，但在 iPad 或 iPhone 设备上不运行。但是它确实可以运行，但可以在 android 设备上运行。我有一个具有相同导航结构的类似站点，并且在该站点上运行良好。

网址是 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;}
4

2 回答 2

1

据我所知，您不应该在移动设备上使用“悬停”CSS 选择器，因为这是由光标触发的，而您没有光标，因为您也没有鼠标。您可以尝试点击并按住，但我不确定。

解决这个问题的更好方法是使用媒体查询来显示并使其仅在移动设备上以某种方式起作用。我建议您通过单击父项来触发下拉菜单，或者以不同的方式显示菜单（子菜单已经打开或类似的东西）。

于 2012-10-15T20:35:53.503 回答
1

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

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

隐藏它和

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

为了展示它，它应该与移动 safari 和移动 chrome 一起使用。

于 2012-10-02T12:13:54.150 回答