สาเหตุหลักเกิดจาก position: relative; บนแท็บ active ไปสร้าง Stacking Context ใหม่ ทำให้ตัวแท็บถูกลอยขึ้นมาทับ Dropdown Menu (ซึ่งมักใช้ position: absolute; หรือ relative ร่วมกับ z-index)

วิธีแก้ไขแบบตรงจุดและไม่กระทบเส้นขอบแท็บ มี 3 ทางเลือก (เลือกใช้ข้อใดข้อหนึ่งตามโครงสร้าง CSS):

1. กำหนด z-index ให้ Dropdown Menu สูงกว่า ไม่ต้องเอา position: relative; ออกจากแท็บ แต่ไปเพิ่ม z-index ให้ตัวเมนูดรอปดาวน์ลอยสูงกว่าแท็บเนื้อหา

CSS

/* ใส่ z-index ให้เมนูดรอปดาวน์ (หรือ container ของเมนู) */
.your-dropdown-menu-class {
    position: absolute; /* หรือ relative */
    z-index: 9999 !important;
}

หรือ

กำหนด z-index ให้ Navbar / Header ทั้งชุด กำหนดให้แถบเมนูหลักทั้งแถบอยู่เหนือเนื้อหาด้านล่างทั้งหมด

CSS

.your-header-or-navbar-class {
    position: relative;
    z-index: 100;
}

จะเป็นมาตรฐานที่ดีที่สุดในการจัดการ z-index ของระบบเมนูครับ