Question

I’m new to jQuery, so please bear with me. I’m trying to make my submenu appear on hover. The second set of <ul> is for submenu.

$(document).ready(function(){
    $('ul.menu.li').hover(
        function() { $('ul', this).css('display', 'block'); },
        function() { $('ul', this).css('display', 'none'); });
});

<ul id="menu">
<li><a href="#">Item 1</a><li>
<ul>
<li>Hi</li>
</ul>
<li><a href="#">Item 2</a></li>
</ul>

Answer 1

Your selector is wrong. You need to reference the parent UL by ID, not class:

$('#menu li').hover(...

moreover, if you are addressing LIs within the UL, you want to use either ancestor-descendant or parent > child:

$('#menu li') // ancestor descendant
$('#menu > li') // parent > child

Additionally, there is no point in setting the CSS display property, when you can just:

$(document).ready(function(){
    $('#menu li').hover(
        function() { $('ul', this).show(); },
        function() { $('ul', this).hide(); });
});