DIV dropdown (jQuery)

Question

I'm looking to create a basic DIV based dropdown menu:

<ul id="menu">
    <li>
        <a href="#">item 1</a>
        <div class="submenu">something here</div>
    </li>
    <li>
        <a href="#">item 2</a>
        <div class="submenu">something else here</div>
    </li>
    <li>
        <a href="#">item 3</a>
        <div class="submenu">something more</div>
    </li>
</ul>

jQuery:

$j('.submenu').hide()
$j("#menu li a").hover(
  function () {
    $(this).addClass('active').next('.submenu').addClass('active').slideDown('fast');
  }, 
  function () {
    $(this).addClass('active').next('.submenu').addClass('active').slideUp('fast');
  }
);

... isn't working.

Answer 1

"#menu ul li a"

references nothing. menu is a ul

Answer 2

ul is not beneath #menu, it is #menu, try this:

$j(document).ready(function(){
  $j('.submenu').hide();
  $j("#menu li a").hover(
    function () {
      $(this).addClass('active').next('.submenu').addClass('active').slideDown('fast');
    }, 
    function () {
      $(this).removeClass('active').next('.submenu').removeClass('active').slideUp('fast');
    }
  );
});