基于 ul 的导航在 iOS Safari / Chrome 中不起作用

Question

导航区域的奇怪问题。它适用于所有桌面浏览器，但不适用于 iOS Safari 和 Google Chrome。点按链接没有任何作用，尽管点按并按住会显示弹出菜单，要求在新窗口中打开链接，因此在这种情况下，它会被识别为链接。

谁能发现我做错了什么？

感谢您的帮助！

HTML：

<div id="nav">
 <h1>Site title<span><a href="/"></a></span></h1>
 <ul>
    <li id="nav-reserveren"><a href="/reserveren/">reserveren</a></li>
    <li id="nav-kalender"><a href="/kalender/">kalender</a></li>
    <li id="nav-interieur"><a href="interieur/">interieur</a></li>
    <li id="nav-contact"><a href="/contact/">contact</a></li>
  </ul> 
</div>

相关CSS：

#nav h1 {
   text-indent: -9999px;
   font-size: 0;
   margin: 0;
   padding: 0;
   width: 451px;
   height: 81px; /*same as span height*/
   position: relative;
}

#nav h1 span a {
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 451px;
   height: 81px;
}

#nav ul {
   position: absolute;
   left: 461px;
   top: 14px;
   list-style-type: none;
}

#nav ul li {
   display: inline;
}

#nav ul li a {
   float: left;
   height: 60px;
   text-indent: -9999px;
}

#nav ul li#nav-reserveren a {
   width: 203px;
   background: transparent url(../img/nav/reserveer.png) top left no-repeat;
}

#nav ul li#nav-kalender a {
   width: 109px;
   background: transparent url(../img/nav/kalender.png) top left no-repeat;
}

#nav ul li#nav-interieur a {
   width: 96px;
   background: transparent url(../img/nav/interieur.png) top left no-repeat;
}

#nav ul li#nav-contact a {
   width: 90px;
   background: transparent url(../img/nav/contact.png) top left no-repeat;
}

编辑：已解决。 问题是在 jQuery 中设置链接的不透明度：

var navLink = $('#nav ul li a');
navLink.css('opacity', '0.8');
navLink.mouseover(function(){
    $(this).css('opacity', '1');
});
navLink.mouseout(function(){
    $(this).css('opacity', '0.8');
});
$('#nav ul li a.active').css('opacity', '1');

将它移到直接的 CSS 中就可以了！

Answer 1

因为 h1 是相对的块元素，而 ul 是绝对的。 ul 倾向于在 h1 下，使链接不可点击。

-> 将 display:inline-block 添加到 h1
或
-> 向 ul 添加一些 z-index（高于 1）

任何一方都应该解决问题。