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> 

所有我想要做的是有sub_home或sub_about出现在家庭或约在主楠上翻转。

这是导入的子导航总是位于左侧，在jquery插件上它倾向于在按钮下方下拉，所以不会很难离开。

是否可以推荐一个插件，以便在必须存在的情况下实现这一点。

Answer 1

请勿使用插件！这非常非常非常简单！

您可以在this jsfillde中看到以下片段。

也许这将帮助您将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; 
} 

Answer 2

您可以通过this link浏览各种菜单插件。