Question

请查看此jsfillde。

<nav role="navigation" class="nav-main">
    <ul class="nav nav-pills" id="menu-primary-navigation">
        <li class="active menu-home"><a href="/">Home</a></li>
        <li class="menu-about-us"><a href="/about-us/">About Us</a></li>
        <li class="menu-program"><a href="/program/">Program</a></li>
        <li class="menu-events"><a href="/events/">Events</a></li>
        <li class="menu-donate"><a href="/donate/">Donate</a></li>
        <li class="menu-contact"><a href="/contact/">Contact</a></li>
    </ul>    
</nav>

正如您所看到的，“关于我们”链接不再可点击，因为图片位于其左侧。我玩过不同的z-index值但没有成功。

你对如何解决这个问题有任何建议吗？

Answer 1

快速解决方案......设置“z-index：1000”

<nav class="nav-main" role="navigation" style="z-index:1000;">
  <ul id="menu-primary-navigation" class="nav nav-pills">
    <li class="active menu-home"><a href="/">Home</a></li>
    <li class="menu-about-us"><a href="/about-us/">About Us</a></li>
    <li class="menu-program"><a href="/program/">Program</a></li>
    <li class="menu-events"><a href="/events/">Events</a></li>
    <li class="menu-donate"><a href="/donate/">Donate</a></li>
    <li class="menu-contact"><a href="/contact/">Contact</a></li>
  </ul>
</nav>

由于z-index问题，菜单项位于透明图像下方

1 个答案: