我的菜单不想在 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>
最佳答案
在不添加 JavaScript 库的情况下，有一个小技巧可以让 hover 始终在 iOS 上工作。您只需要在悬停元素内放置一些默认状态 设置为display: none 的东西，并在悬停时使其可见。这将 iOS 强制运行 hover。
关于ios - CSS 菜单在 iPad 上的 iOS 中导致问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16606952/