內聯列表菜單無法正常工作

Question

我有這個JQ下拉菜單，我試圖讓它正常工作。這可能是一個HTML CSS問題。我一直在玩它幾個小時，試圖讓它正常工作，並得出結論，我做得不對。我想學習正確的方法，而不是僅僅使其工作。菜單slidetoggle導致間距失控，標題將反彈爲擴展菜單留出空間。當我設置高度和空間以騰出空間時，不會有滑動標題的標題將位於底部。

的visable允許我以顯示管理員

/隱藏到目前爲止，我已經

<nav> 
    <ul> 
     <li style="display: inline;"><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a> 
     </li> 
     <li style="display: inline;"><a href="Support.aspx" class="NavTitle ntAlter">Support</a> 
     </li> 
     <li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle1"> Items </span> 
     <ul style="list-style-type: none;"> 
      <li><a style="display: none;" class="subMenu1">Add</a></li> 
      <li><a style="display: none;" class="subMenu1">Approve</a></li> 
      <li><a style="display: none;" class="subMenu1">Update</a></li> 
      <li><a style="display: none;" class="subMenu1">Delete</a></li> 
     </ul> 
     </li> 
     <li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle2"> Contacts</span> 
     <ul style="list-style-type: none;"> 
      <li><a style="display: none;" class="subMenu2">Add</a></li> 
      <li><a style="display: none;" class="subMenu2">Approve</a></li> 
      <li><a style="display: none;" class="subMenu2">Update</a></li> 
      <li><a style="display: none;" class="subMenu2">Delete</a></li> 
     </ul> 
     </li> 
    </ul> 
</nav> 

這個腳本

<script type="text/javascript"> 
    $('#NavTitle1').hover(function() { 
     $('.subMenu1').stop(true, true).slideToggle('medium'); 
    }); 

    $('#NavTitle2').hover(function() { 
     $('.subMenu2').stop(true, true).slideToggle('medium'); 
    }); 
</script> 

Answer 1

我建議你閱讀導航嵌套的列表。關於這個話題有很多文章。我引用了​​。

這裏是一個工作示例：http://jsfiddle.net/pHqKC/

<nav> 
    <ul> 
     <li><a href="Loggedin/Search.aspx" class="NavTitle ntAlter">Home</a> 
     </li> 
     <li><a href="Support.aspx" class="NavTitle ntAlter">Support</a> 
     </li> 
     <li runat="server" id="NavTitle1_wrap" visible="false" class="NavTitle"> 
     <span id="NavTitle1" class="menu"> Items 
      <ul class="submenu" style="list-style-type: none;"> 
       <li><a>Add</a></li> 
       <li><a>Approve</a></li> 
       <li><a>Update</a></li> 
       <li><a>Delete</a></li> 
      </ul> 
     </span> 
     </li> 
     <li runat="server" id="NavTitle2_wrap" visible="false" class="NavTitle" style="display: inline-block;"> 
     <span id="NavTitle2" class="menu"> Contacts 
      <ul class="submenu" style="list-style-type: none;"> 
       <li><a>Add</a></li> 
       <li><a>Approve</a></li> 
       <li><a>Update</a></li> 
       <li><a>Delete</a></li> 
      </ul> 
     </span> 
     </li> 
    </ul> 
</nav>​ 

的JavaScript：

$(document).ready(function() { 
    $('.menu').hover(
     function() { 
      $(this).find('.submenu').show(); 
     }, 
     function() { 
      $(this).find('.submenu').hide(); 
     } 
    ); 
});​ 

見工作鏈路上的CSS。我不確定這是否能解決您的問題，但我建議您開始簡單並按照自己的方式進行。直到找出基礎知識之前，不要擔心幻燈片。