Toggle ul (подменю)

Question

Как мне показать первые <ul> внутри <li>, когда я наведите курсор на <li>?

Answer 1

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();
});

Примечание: это необходимо только для браузеров, которые не поддерживают hover в lis (IE6)

Answer 2

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

Answer 3

Просто чтобы отстаивать CSS. Если вы не поддерживаете IE6 и не требуете специального эффекта, я предлагаю сделать это с помощью CSS:

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

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