Toggle ul (submenu)

How do I show the first <ul> inside a <li>, when I hove开发者_高级运维r on the <li>?

HTML:

<ul>
    <li class="firstLevel">
        <ul></ul>
    </li>
    <li class="firstLevel"></li>
    <li class="firstLevel"></li>
</ul>

JS:

$('li.firstLevel').hover(function(){
    $(this).find('ul:first').show();
},
function(){
    $(this).find('ul:first').hide();
});

Note: this is only necessary for browsers that do not support hover on lis (IE6)

$("ul.menu>li").hover(
  function() {
    $(this).children("ul:first").show();
  },
  function() {
    $(this).children("ul:first").hide();
  }
);

Just to advocate CSS. If you are not supporting IE6 and don't require a special effect, I suggest doing this with CSS:

ul.menu li > ul {
  display: none;
}

ul.menu li:hover > ul {
  display: block;
}