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瀏覽各種菜單插件。