ยังไม่ได้

หากลอง CSS แล้วยังไม่ Drop มีความเป็นไปได้สูงว่าเกิดจาก “ลำดับของ HTML” หรือ “ความขัดแย้งของ CSS (Selector Priority)” ครับ เพราะ WordPress บางครั้งจะเจนคลาสออกมาซ้อนกันหลายชั้น

เพื่อให้มั่นใจว่ามันจะหล่นลงมาแน่นอน ผมขอให้คุณ เปลี่ยน CSS ในส่วนเมนูใหม่ทั้งหมด โดยใช้ชุดที่ “ดักทุกทาง” และเพิ่มคำสั่งบังคับแสดงผล ดังนี้ครับ:

1. อัปเดต CSS (ใช้ชุดนี้แทนของเก่าทั้งหมดในส่วนเมนู)

CSS

/* --- เคลียร์สไตล์พื้นฐาน --- */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* --- รายการเมนูหลัก --- */
.main-navigation li {
    position: relative; /* สำคัญ: ต้องมีเพื่อให้ลูกเกาะตำแหน่งแม่ */
    display: block;
}

.main-navigation a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* --- ส่วนของเมนูย่อย (Dropdown) --- */
/* ดักคลาสมาตรฐานทั้งหมด: ul ซ้อน ul, .sub-menu, .children */
.main-navigation ul li ul,
.main-navigation ul li .sub-menu,
.main-navigation ul li .children {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 220px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    z-index: 99999;
    display: none !important; /* ซ่อนไว้ก่อนแบบเด็ดขาด */
    flex-direction: column;
    padding: 10px 0;
    border-top: 3px solid #0056b3;
}

/* --- คำสั่งแสดงผลเมื่อ Hover (พระเอกของงาน) --- */
/* เมื่อเอาเมาส์ชี้ที่ li ให้แสดง ul หรือ .sub-menu ที่อยู่ข้างในทันที */
.main-navigation ul li:hover > ul,
.main-navigation ul li:hover > .sub-menu,
.main-navigation ul li:hover > .children {
    display: flex !important; /* บังคับแสดงผลเป็นแนวตั้ง */
}

/* --- ตกแต่งรายการในเมนูย่อย --- */
.main-navigation ul li ul li,
.main-navigation ul li .sub-menu li,
.main-navigation ul li .children li {
    width: 100%;
}

.main-navigation ul li ul li a,
.main-navigation ul li .sub-menu li a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: normal;
    border-bottom: 1px solid #f5f5f5;
    white-space: nowrap;
}

.main-navigation ul li ul li a:hover {
    background: #f8f9fa;
}

2. ตรวจสอบ HTML ใน header.php อีกครั้ง

ตรวจสอบให้แน่ใจว่าแท็ก <nav> ของคุณครอบคลุมตัวเมนูไว้อย่างถูกต้อง:

PHP

<nav class="main-navigation">
    <div class="container">
        <?php insurance_auto_menu(); ?>
    </div>
</nav>

3. วิธีทดสอบที่ได้ผลที่สุด

หากแก้ตามข้างบนแล้วยังไม่หล่น ให้คุณลอง “คลิกขวา” ที่เมนูที่มีลูกย่อยในหน้าเว็บ แล้วเลือก Inspect (ตรวจสอบ):

1. ดูว่าภายใต้แท็ก <li> ของเมนูนั้น มีแท็ก <ul> อยู่ข้างในจริงๆ หรือไม่
2. หาก ไม่มี <ul> ซ้อนข้างใน แสดงว่าปัญหาอยู่ที่ functions.php (มันไม่ได้ดึงลูกออกมา)
3. หาก มี <ul> ซ้อน แต่ไม่โชว์ แสดงว่า CSS display: flex !important ในตอน Hover ถูกคำสั่งอื่นทับอยู่

ถ้ายังไม่ได้จริงๆ: รบกวนคุณลองส่งโค้ดในไฟล์ header.php (ช่วงที่เป็นส่วนเมนู) มาให้ผมดูหน่อยครับ ผมจะเช็ค Selector ให้แม่นยำกว่านี้ครับ!