لم أفهم كود القائمة المنسدلة بداخل قائمة رئيسية
السلام عليكم و رمضان كريم.
في درس القوائم المنسدلة فقرة قائمة منسدلة بداخل قائمة رئيسية، أواجه صعوبة في فهم طريقة حالات الروابط مثل:
li a:hover, .dropdown:hover .drop-btn {
background-color: cadetblue;
}
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;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
color: white;
background-color: cadetblue;
}
أنا أفهم سبب وضعهم و لا أفهم طريقة كتابتهم لذا أرجو شرحها و شكراً.
و أخيراً أعتذر على الإطالة و أعانكم الله على الصيام و القيام و حسن الأعمال و أتمنى لكم صوماً مقبولاً.
HTML
