شرح صفوف ومحتوى الفقرة
لو بقيت القائمة الفرعية ضمن التدفق الطبيعي للمستند لأدى إظهارها إلى تمديد ارتفاع الشريط العلوي ودفع محتوى الصفحة بأكمله إلى الأسفل! ولكي تطفو اللوحة بسلاسة فوق المحتوى نمنح العنصر الأب .has-menu الخاصية position: relative ونمنح القائمة الفرعية .submenu التموضع المطلق position: absolute; top: 100%;.
كما يضمن تحديد طبقة تكديس موجبة مثل z-index: 20 مع عرض أدنى مريح min-width: 190px وظل ناعم box-shadow تمييز اللوحة العائمة بوضوح فوق البطاقات والعناوين الموجودة أسفلها.
CSS
.has-menu { position: relative; }
.submenu {
display: none;
position: absolute;
top: 100%;
inset-inline-start: 0;
min-width: 180px;
z-index: 20;
}
.has-menu:hover > .submenu { display: block; }