菜單下拉菜單消失，鏈接被刪除

我正在創建一個帶有下拉菜單的自定義菜單，但是我有一些錯誤。在我的小提琴中，它就像它應該那樣工作，但是在網站中卻沒有。我沒有看到是什麼導致了錯誤。菜單下拉菜單消失，鏈接被刪除

這裏是我到目前爲止的代碼。

HTML：

<div id="nav_menu-12" class="et_pb_widget widget_nav_menu"> 
<div class="menu-logged-in-container"> 
    <ul id="menu-logged-in" class="menu">     
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1483"> 
      <a href="http://94co.com/client3/domaine-de-gourjo/">Domaine de Gourjo</a> 
       <ul class="sub-menu"> 
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1403"><a href="/client3/about/#the-castle">The Castle</a></li> 
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1404"><a href="/client3/about/#the-vineyard">The Vineyard</a></li> 
         <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1405"><a href="/client3/about/#a-family-history">A Family History</a></li> 
       </ul> 
     </li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1487"><a href="http://94co.com/client3/wines/">Our Wines</a> 
      <ul class="sub-menu"> 
       <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1498"><a href="/client3/wines/#domaine-gourjo-link">Domaines Wines</a></li> 
       <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1497"><a href="/client3/wines/#gourjo-link">Gourjo</a></li> 
      </ul> 
     </li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1401"><a href="http://94co.com/client3/store/">eCellar</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1629"><a href="http://94co.com/client3/gorgeous-mag/">Gorgeous Mag</a></li> 
     <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1402"><a href="http://94co.com/client3/contact-us/">Contact</a></li> 
    </ul> 
</div>

CSS：

#menu-logged-in li ul { position: absolute; top: 30px; left: -27px; padding: 20px; } 
#menu-logged-in li ul { z-index: 9999; width: 100% !important; padding-left: 10px !important; background: none; visibility: hidden; opacity: 0; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 
#menu-logged-in li:hover > ul { opacity: 1; visibility: visible; } 
#menu-logged-in li li { padding: 0;font-size:14px;margin-left: 20px; width:170px;} 
#menu-logged-in li li ul { z-index: 1000; top: -3px; left: 220px; } 
#menu-logged-in li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } 
.nav li li a, .et_mobile_menu li a { font-size: 14px; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 
#menu-logged-in ul li a:hover { color: #ff0000; } 
#menu-logged-in li a:hover { color: #ff0000; } 
#menu-logged-in li.current-menu-item > a { 
color: #b7b7b7 !important; 
} 

#menu-logged-in .menu-item-has-children > a:first-child:after { 
content: ' '; 
} 

#menu-logged-in li { 
display: inline-block; 
font-size: 20px; 
color:#a0a0a0; 
position: relative; 
padding: 0 35px 0 35px; 
text-align: center; 
}

這裏是小提琴：http://jsfiddle.net/elitedesignstudios/wR7PN/

一如既往任何搞清楚了這一點幫助將是巨大的。

來源

2014-02-11 David Coggins

如果您從'＃menu-logged-in li ul'類中刪除'hidden'和'opacity'屬性以隨時顯示下拉菜單，您將看到它們不再是可點擊的鏈接（僅限於網站，而不是小提琴） –

我不知道它在做什麼，但你有這個覆蓋子菜單的div。

HTML

<div class="et_pb_row"> 
<div class="et_pb_column et_pb_column_4_4"> 
<hr class="et_pb_space" style="height:150px;"> 
</div> <!-- .et_pb_column --> 
</div>

CSS

.et_pb_row { 
width: 1080px; 
margin: 0 auto; 
padding: 30px 0 0 0; 
position: relative; 
z-index: 2; 
}

如果刪除的z-index菜單功能。

來源

2014-02-11 17:05:35

這就是保利，工作就像一個魅力。 –

菜單下拉菜單消失，鏈接被刪除

回答

相關問題