لم أفهم كود القائمة المنسدلة بداخل قائمة رئيسية

السلام عليكم و رمضان كريم.

في درس القوائم المنسدلة فقرة قائمة منسدلة بداخل قائمة رئيسية، أواجه صعوبة في فهم طريقة حالات الروابط مثل:

li a:hover, .dropdown:hover .drop-btn {
    background-color: cadetblue;
}

أنا فهمت أن المقصود هنا أنه عندما يتم وضع المؤشر فوق الروابط يتغير لون الخلفية إلى اللون المشار إليه و لكن ما لم أفهمه هو طريقة الكتابة حيث إذا وضعنا فاصلة بين حالة الكلاس dropdown و الكلاس dropdown-btn فإن لون الخلفية الخاص بزر القائمة المنسدلة سيتغيّر دون وضع المؤشر فوقه.

و لماذا لا نضع hover للكلاس dropdown-btn أيضاً طالما أننا نريد تغيير لونه بمجرد وضع المؤشر فوقه كذالك أيضاً؟

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a:hover {
    color: white;
    background-color: cadetblue;
}

أنا أفهم سبب وضعهم و لا أفهم طريقة كتابتهم لذا أرجو شرحها و شكراً.

و أخيراً أعتذر على الإطالة و أعانكم الله على الصيام و القيام و حسن الأعمال و أتمنى لكم صوماً مقبولاً.