شرح صفوف ومحتوى الفقرة
الاعتماد على .has-menu:hover > .submenu وحده يحرم مستخدمي لوحة المفاتيح من فتح القائمة، وحتى استخدام :focus على الرابط الأب يفشل فور ضغط مفتاح Tab للانتقال إلى أول رابط فرعي؛ لأن الرابط الأب يفقد التركيز فتُغلق القائمة في وجه المستخدم!
يعالج دمج :hover مع الفئة الزائفة :focus-within على العنصر الأب .has-menu هذه المشكلة جذرياً؛ إذ تظل الحالة نشطة طوال وجود التركيز على الرابط الرئيسي أو أي رابط داخلي ضمن القائمة الفرعية، ثم تُغلق القائمة تلقائياً فور خروج مؤشر الجدولة من آخر عنصر فرعي.
CSS
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu {
opacity: 1;
visibility: visible;
}
.sub-link:focus-visible {
outline: 2px solid #7750b2;
}