Javascript/jQuery 子菜单（固定位置）

Question

我一直在寻找 jQuery 插件，但找不到完全符合我要求的插件。

导航分为两部分，主导航：

<div id="nav">
<a href="" ><img src="/shell/img/nav/home_nm.gif" /></a><a href="" ><img src="/shell/img/nav/about_nm.gif" /></a><img src="/shell/img/nav/apply_nm.gif" /><img src="/shell/img/nav/contact_nm.gif" /><img src="/shell/img/nav/information_nm.gif" /><img src="/shell/img/nav/working_nm.gif" /><img src="/shell/img/nav/moveable_nm.gif" />
</div>

然后是子导航：

<div id="sub_nav" >
<ul id="sub_home"><li><a href="">Courses on Offer</a></li><li><a href="">Work Placements</a></li><li><a href="">Blog</a></li></ul>
<ul id="sub_about"><li><a href="">Funding and  Donations</a></li><li><a href="">Testimonials</a></li><li><a href="">Staff and Board</a></li></ul>
</div>

我想要做的就是在主 nan 上的 home 或 about 翻转时出现 sub_home 或 sub_about。

重要的是，子导航始终位于左侧，在 jquery 插件上，它倾向于在按钮下方进行下拉，所以不是硬左。

是否可以推荐一个插件来实现这一点，因为它必须存在。

Answer 1

不要使用插件！非常非常非常简单！

您可以在this jsfillde 中看到以下运行中的 sn-ps。

也许它会帮助您将 html 重新排列为更具语义的结构，如下所示：

<nav>
  <ul>
    <li>
      <a href=#>Menu 1</a>
      <ul>
        <li><a href=#>Submenu 1.1</a></li>
        <li><a href=#>Submenu 1.2</a></li>
        <li><a href=#>Submenu 1.3</a></li>
      </ul>
    </li>

    <li>
      <a href=#>Menu 2</a>
      <ul>
        <li><a href=#>Submenu 2.1</a></li>
        <li><a href=#>Submenu 2.2</a></li>
        <li><a href=#>Submenu 2.3</a></li>
      </ul>
    </li>

    <li>
      <a href=#>Menu 3</a>
      <ul>
        <li><a href=#>Submenu 3.1</a></li>
        <li><a href=#>Submenu 3.2</a></li>
        <li><a href=#>Submenu 3.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

最初使用 CSS 隐藏您的子菜单，如下所示：

nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover > ul {
  display: block;
}