在 ipad 上导致 iOS 出现问题的 CSS 菜单
Posted
技术标签:
【中文标题】在 ipad 上导致 iOS 出现问题的 CSS 菜单【英文标题】：CSS menu causing problems in iOS on ipad 【发布时间】：2013-05-17 10:36:33 【问题描述】：我的菜单不想在 ipad 上运行，最初我认为这是设置为 all 的过渡属性 - 现在它处于不透明度状态并且没有任何区别。问题是如果父 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>
【问题讨论】：
请问有人有什么建议可以解决这个问题吗？ 【参考方案1】：在不添加 javascript 库的情况下，有一个小技巧可以让 hover 始终在 ios 上工作。您只需在悬停元素内放入 default state 设置为display: none 的内容，并在悬停时使其可见。这将 iOS 强制运行hover。
【讨论】：
我无法编辑 HTML，因为它是由 Joomla 菜单模块生成的。但是，我认为 iOS 将鼠标悬停解释为现在的点击？以上是关于在 ipad 上导致 iOS 出现问题的 CSS 菜单的主要内容，如果未能解决你的问题，请参考以下文章
在 iPad mini iOS 8 上运行 iPhone 应用程序会导致 UIActivityViewController 中的图标大小错误