تشخیص المنت (تگ) کلیک شده زیرمجموعه المنت همنام

من همچین کدی با جی کوئری ساختم در صفحه وب

کد HTML:

<ul id="Decor"> <li id="Ali" style="background-color: white;">Ali<ul><li id="Ali1">Ali</li><li id="red1">red</li><li id="Hasan">Hasan</li><li id="blue">blue</li><li id="Hosein">Hosein</li></ul></li><li id="red" style="background-color: white;">red<ul><li id="Ali">Ali</li><li id="red">red</li><li id="Hasan">Hasan</li><li id="blue">blue</li><li id="Hosein">Hosein</li></ul></li><li id="Hasan" style="background-color: white;">Hasan</li><li id="blue">blue</li><li id="Hosein">Hosein</li></ul>

هرچند آیدی دادن به تگ های زیرمجموعه اصولی نیست ولی این محل بحث نیست
سوال من اینه که چطور تگ لیست (li) زیرمجموعه رو هنگام کلیک تشخیص بدیم
چون وقتی این کد رو می زنم:
$("li").mouseenter(function (e) {

              $(this).css("background-color", "pink");

            })
تگ Li والد و اصلی رو انتخاب می کنه و زیرمجموعه ها رو تشخیص نمی ده
در حالی که تو برنامه باید از تگ لیست به صورت تو در تو استفاده کنم و سلکتور، باید پایین ترین نسل و زیرمجموعه رو تشخیص بده