由於z-index問題導致菜單項位於透明圖像下

請查看此jsfillde。由於z-index問題導致菜單項位於透明圖像下

<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值沒有成功。

你有什麼建議如何解決這個問題嗎？

來源

2014-02-26 farjam

請添加有意義的代碼和問題描述在這裏。請不要將鏈接到需要修復的網站 - 否則，一旦問題得到解決，此問題將會丟失未來訪問者的任何價值。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。有關更多信息，請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到它嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

請不要鏈接到外部網站。這是爲什麼：http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-它 –

你們都是對的。在jsfiddle（或類似的東西）中重新創建這個場景是相當困難的，因爲整體的html/css比較複雜。我將編輯該問題以使其更加清晰和描述性，並刪除外部鏈接。謝謝 – farjam

一個快速的解決方案...設置「的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>

來源

2014-02-26 21:39:57 EyrockScript

謝謝，我一直將z-index添加到UL元素中。您的解決方案奏效 – farjam

由於z-index問題導致菜單項位於透明圖像下

回答

相關問題