如何將這個菜單變成一個多層菜單？

Question

我剛剛發現了這個很酷的水平下拉菜單：

http://css-tricks.com/examples/DiggHeader/#

我很想使用它，但是我需要多層的。 但是卻不知道如何去做。 我已經搜索了有關如何創建多級菜單的教程，但是只能找到下載內容和演示預覽。 ：-S

誰能提供任何建議，使我將菜單制作成多層以上？

謝謝

Answer 1

您可以查看我為jQuery制作的簡約導航插件 。 通過更改css以使用ul列表的相對和絕對位置，您可能可以使它像該鏈接一樣工作。

Answer 2

我喜歡CSS-Tricks，這可以通過幾種方式完成。 這是一個簡單的示例，我建議您進行此操作。

HTML標記；

<div id="nav">
  <ul>
    <li>
      <a href="...">Technology</a>
      <ul>
        <li><a href="...">Apple</a>
          <ul>
            <li><a href="...">iPhone</a></li>
          </ul>
        </li>
        <li><a href="...">Design</a></li>
      </ul>
    </li>
  </ul>
</div>

注意<a href="...">Apple</a>旁邊的<ul> 。

CSS Only方法；

<style>
  #nav ul li ul{
    display:none;
  }
  #nav ul li:hover>ul{
    display:block;
  }
</style>

在用戶將鼠標懸停在某個元素上之前，此CSS將隱藏不需要顯示的元素。 然后會懸停顯示。

如果您想更改效果，可以使用JavaScript完成此元素的懸停。

jQuery方法;

<style>
  #nav ul li ul{
    display:none;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
  $("#nav ul li").each(function(){
    $(this).mouseenter(function(){
      $(this).find("ul:first").show();
    }).mouseleave(function(){
      $(this).find("ul:first").hide();
    });
  })
</script>