显示块 使用 jQuery 时无显示问题

当我将鼠标悬停在div#new-menu-lower ul.menuul li.menuli上时，我想在下面的代码中将显示块添加到第一个 ul 和第一个 li。问题是它向所有 ul 和 li 添加了显示块/无。

 $(document).ready(function() {
    //on hover of sub menu li then highlight itself
    $('div#new-menu-lower ul.menuul li.menuli').hover(
    function() {
        $('div#new-menu-lower ul li ul:first').css("display","block");
        $('div#new-menu-lower ul li ul li:first').css("display","block");
        $('div#new-menu-lower ul li ul li ul:first').css("display","block");
    }, function() {
        $('div#new-menu-lower ul li ul:first').css("display","none");
        $('div#new-menu-lower ul li ul li:first').css("display","none");
        $('div#new-menu-lower ul li ul li ul:first').css("display","none");
    })
});

如果我将鼠标悬停在第二个 UL LI 上，那么它只会显示第一个 ul li ul li，这是错误的。

我已经设法通过执行以下操作解决了其中的一部分：（它现在将display:block添加到子菜单中，即 - ul li ul，但我不会将其添加到其他元素）

$(document).ready(function() {
    //on hover of sub menu li then highlight itself
    $('div#new-menu-lower ul.menuul li.menuli').hover(
    function() {
        $(this).children('div#new-menu-lower ul li ul').css("display","block");
        $(this).children('div#new-menu-lower ul li ul li:first').css("display","block");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","block");
    }, function() {
        $(this).children('div#new-menu-lower ul li ul').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li:first').css("display","none");
        $(this).children('div#new-menu-lower ul li ul li ul').css("display","none");
    })
});