爲什麼菜單沒有鏈接？

Question

我有這個網站：

link

你能告訴我請這就是爲什麼菜單鏈接不工作？

代碼HTML：

<header id="masthead" class="navbar navbar-default" role="banner"> 
    <div class="container-fluid"> 
     <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 674px; margin-left: 260px;"> 
<!--   <div class="container-fluid">--> 
       <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <h1 class="site-title"><a href="http://bagel.dg-site.com/bagel/" rel="home">Bagel House</a></h1> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 

       <!--   <form class="navbar-form navbar-left" role="search">--> 
       <!--    <div class="form-group">--> 
       <!--     <input type="text" class="form-control" placeholder="Search">--> 
       <!--    </div>--> 
       <!--    <button type="submit" class="btn btn-default">Submit</button>--> 
       <!--   </form>--> 

       <a class="screen-reader-text skip-link" href="#content">Skip to content</a> 

       <div class="menu-ggg-container"><ul id="menu-ggg" class="menu"><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-17 current_page_item menu-item-18"><a href="http://bagel.dg-site.com/bagel/">Home</a></li> 
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://bagel.dg-site.com/bagel/index.php/about/">About</a></li> 
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://bagel.dg-site.com/bagel/index.php/news/">News</a></li> 
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://#">Contact</a></li> 
<li id="menu-item-227" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-227"><a href="http://bagel.dg-site.com/bagel/index.php/contact/">Contact</a></li> 
</ul></div>     
      </div><!-- /.navbar-collapse --> 
<!--   </div>--> 
    <!-- /.container-fluid --> 
     </nav> 
    </div><!-- .container --> 
</header> 

我把圖像，以便更好地理解我的意思聯繫。

這也許可以解釋爲什麼它不工作？

它隱藏在一個div？

我試圖用z-index但遺憾的是沒有工作...

你可以幫我解決這個問題嗎？

在此先感謝！

Answer 1

之所以這樣，是因爲您將.navbar-default上的z-index設置爲-2將其更改爲類似於10的東西，並且您可以單擊鏈接。

.navbar-default { 
    background-color: #F8F8F8; 
    border-color: #E7E7E7; 
    z-index: 10; <-- change from -2 to 10 
} 

這將解決問題，但您可能需要修復其餘元素。

嚮導航容器提供否定索引時，問題是某些瀏覽器上的導航元素會繼承該z-index。您可能需要重新修改佈局。

Answer 2

，而不是試圖用一個錨，嘗試李的onclick：

<li onclick="location.href='http://bagel.dg-site.com/bagel/index.php/about/">About</a></li> 

Answer 3

您需要從.navbar默認類，然後從您的導航欄，固定一流刪除的z-index。

您還需要將導航寬度設置爲1046px。

Answer 4

請找到小提琴。 我用你的代碼的精簡版..

http://jsfiddle.net/josangel555/y35b2qfv/

• 刪除了DIV權能夠在ul。
• 增加了以下類ul：nav navbar-nav