javascript - 自定义 jQuery 子菜单定位

Question

我正在尝试创建一个至少有两级子菜单的水平菜单。所有子菜单都是垂直的。

子菜单 1 将位于其父菜单的正下方。 所有后续子菜单级别 (2+) 应位于其父菜单的右侧。

我刚刚开始学习如何使用 jQuery 菜单，他们似乎没有对此进行自定义。我不知道如何解决这个问题...我尝试在 $("#myMenu .level1") 上调用 .menu() 但失败。

我的问题是 - 如果有人能够为我指明如何制作我上面所述的菜单的正确方向，我将不胜感激。

Javascript 片段

<script>
  $(function() {
    $("#myMenu").menu({
      position: {
        my: "left top",
        at: "left bottom"
      }
    });
  });
</script>

HTML 片段

<ui id="myMenu">
  <li class="level1">
    <a href="#">Item 1</a>
    <ul>
      <li class="level2">
        <a href="#">Item 1</a>
        <ul>
          <li class="level3">
            <a href="#">Item 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>

更新:JSbin

Answer 1

嗨，我终于回答了你的问题。使用菜单的一些属性，例如模糊和焦点。我发现这个页面已经有解决方案 http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu 。我研究了这些行并将其应用到您的代码中。如果您对功能有任何疑问，请随时询问。

在此处查看新代码 http://jsbin.com/uxuTAba/5/ .