Javascript/jQuery sub menu (fixed position)

Question

I have looked for jQuery plugins but can't find any that do exactly what I want.

The nav is in two parts, the main nav:

<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>

And then a sub nav:

<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>

All I want to do is have sub_home or sub_about appear when home or about on the main nan is rolled over.

It is import that the sub nav is always positioned to the left, on the jquery plugins it tends to make a drop down under the button, so not hard left.

Can a plugin be recommended that will easilh achieve this as something must exist.

Answer 1

Don't use a plugin! It is very very very easy!

You can see the following snippets in action in this jsfillde.

Maybe it would help you to rearrange your html to a more semantic structure like this:

<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>

Just hide your submenus initially using CSS like this:

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

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