ios - CSS 菜单在 iPad 上的 iOS 中导致问题

Question

我的菜单不想在 ipad 上工作，最初我认为这是将过渡属性设置为全部 - 它现在处于不透明度状态并且没有任何区别。问题是如果父 li 是文本分隔符，子菜单项不会在 ipad 上下拉。如果父 li 是一个链接，它就可以正常工作。这很奇怪，因为下拉事件发生在 li 标签而不是 a 标签的悬停上。有人有什么建议吗？

CSS:

#nav, #nav a {
    color: #451803;
    font-family: 'stbreock';
    font-size: 24px;
    text-shadow: 0 1px 1px #EBD8B3;
}
#nav a:hover {
text-shadow: 0 1px 1px #4D4D4D;
}

#nav ul ul {
   z-index:100;
     opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    -ms-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -webkit-transition: opacity .5s ease-in;
  left:0;
}

#nav ul li:hover > ul {
  z-index:100;
    visibility: visible;
    opacity: 1;
}

#nav ul {
  padding: 0 15px;
  list-style: none;
  position: relative;
  display: inline-table;
}
  #nav ul:after {
    content: ""; clear: both; display: block;
  }
#nav ul li {
  float: left;
  position:relative;

}
 #nav ul li:hover {

  }
    #nav ul li:hover a {
      color: #451803;
    }

 #nav ul li{
    display: block; padding: 10px;
    color: #451803; text-decoration: none;
  }

#nav ul ul {
 padding: 0;
  position: absolute;
  top: 100%;
}
  #nav ul ul li {
    float: none;
    position: relative;
  background-color: rgba(227, 200, 147, 0.9);
   border-top: 1px solid #B07D37;
  width:120px;
  }
    #nav ul ul li a {
      color: #451803;
    }  

#nav ul ul li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#nav ul ul li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
      #nav ul ul li a:hover {

      }
#nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

HTML:

<div id="nav">
    <div class="inside">
        <div class="moduletable">
            <ul class="menu">
                <li class="item-101 current active"><a href="/">Home</a>
                </li>
                <li class="item-108 deeper parent"><span class="separator">School Info</span>

                    <ul>
                        <li class="item-182"><a href="/index.php/school-info/st-breock">Who Was St Breock?</a>
                        </li>
                        <li class="item-109"><a href="/index.php/school-info/uniform">Uniform</a>
                        </li>
                        <li class="item-110"><a href="/index.php/school-info/prospectus">Prospectus</a>
                        </li>
                        <li class="item-111"><a href="/index.php/school-info/ofsted">Ofsted</a>
                        </li>
                        <li class="item-112"><a href="/index.php/school-info/academy-status">Academy Status</a>
                        </li>
                        <li class="item-113"><a href="/index.php/school-info/policies">Policies</a>
                        </li>
                    </ul>
                </li>
                <li class="item-124 deeper parent"><span class="separator">Classes</span>

                    <ul>
                        <li class="item-174"><a href="/index.php/classes/headteacher-s-blog">Headteacher's Blog</a>
                        </li>
                        <li class="item-125"><a href="/index.php/classes/fs1">FS1</a>
                        </li>
                        <li class="item-126"><a href="/index.php/classes/fs2">FS2</a>
                        </li>
                        <li class="item-127"><a href="/index.php/classes/year-1">Year 1</a>
                        </li>
                        <li class="item-128"><a href="/index.php/classes/year-2">Year 2</a>
                        </li>
                        <li class="item-129"><a href="/index.php/classes/year-3">Year 3</a>
                        </li>
                        <li class="item-130"><a href="/index.php/classes/year-4">Year 4</a>
                        </li>
                        <li class="item-131"><a href="/index.php/classes/year-5">Year 5</a>
                        </li>
                        <li class="item-132"><a href="/index.php/classes/year-6">Year 6</a>
                        </li>
                    </ul>
                </li>
                <li class="item-134 deeper parent"><span class="separator">Our Team</span>

                    <ul>
                        <li class="item-117"><a href="/index.php/our-team/staff">Staff</a>
                        </li>
                        <li class="item-118"><a href="/index.php/our-team/governors">Governors</a>
                        </li>
                    </ul>
                </li>
                <li class="item-133 deeper parent"><span class="separator">Parent Zone</span>

                    <ul>
                        <li class="item-114"><a href="/index.php/parent-zone/bistro">Bistro</a>
                        </li>
                        <li class="item-115"><a href="/index.php/parent-zone/newsletters">Newsletters</a>
                        </li>
                        <li class="item-116"><a href="/index.php/parent-zone/calendar">Calendar</a>
                        </li>
                        <li class="item-160"><a href="/index.php/parent-zone/stbreock-results">St Breock Achievements</a>
                        </li>
                        <li class="item-141"><a href="/index.php/parent-zone/extended-care">Extended Care</a>
                        </li>
                        <li class="item-119"><a href="/index.php/parent-zone/holiday-activities">Holiday Activities</a>
                        </li>
                        <li class="item-138"><a href="/index.php/parent-zone/links">Links</a>
                        </li>
                        <li class="item-142"><a href="/index.php/parent-zone/pta">PTA</a>
                        </li>
                    </ul>
                </li>
                <li class="item-121 deeper parent"><span class="separator">Kids Zone</span>

                    <ul>
                        <li class="item-135"><a href="/index.php/kids-zone/learning-links">Learning Links</a>
                        </li>
                        <li class="item-136"><a href="/index.php/kids-zone/info-search">Info Search</a>
                        </li>
                        <li class="item-137"><a href="/index.php/kids-zone/having-fun">Having fun</a>
                        </li>
                    </ul>
                </li>
                <li class="item-122"><a href="/index.php/school-council">School Council</a>
                </li>
                <li class="item-123 deeper parent"><a href="/index.php/olympics">Olympics</a>
                    <ul>
                        <li class="item-139"><a href="/index.php/olympics/our-olympics">Our Olympics</a>
                        </li>
                        <li class="item-151"><a href="/index.php/olympics/olympic-legacy">Olympic Legacy</a>
                        </li>
                        <li class="item-152"><a href="/index.php/olympics/olympic-batons">The Olympic Batons</a>
                        </li>
                    </ul>
                </li>
                <li class="item-140"><a href="/index.php/contact-us">Contact Us</a>
                </li>
            </ul>
        </div>

Answer 1

在不添加 JavaScript 库的情况下，有一个小技巧可以让 hover 始终在 iOS 上工作。您只需要在悬停元素内放置一些默认状态 设置为display: none 的东西，并在悬停时使其可见。这将 iOS 强制运行 hover。