0
我的菜單不想在iPad上工作，初始時我以爲這是過渡屬性被設置爲全部 - 它現在是不透明的，並沒有任何區別。問題是，如果父li是文本分隔符，子菜單項不會在ipad上下拉。它可以正常工作，如果父李是一個鏈接。這很奇怪，因爲下拉事件發生在懸停的li標籤而不是a標籤上。有沒有人有什麼建議？CSS菜單在ipad上導致iOS的問題
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>
有沒有人有任何建議來解決這個問題？ –