ยังไม่ดรอป

ปัญหานี้มักเกิดจาก CSS เฉพาะของ WordPress (เช่นคลาส children หรือ sub-menu) ที่เรายังไม่ได้ดักให้ครบ และความลึกของเมนูที่ WordPress เจนออกมาครับ

เพื่อให้เมนู “Drop” ลงมาได้อย่างแน่นอน (รองรับทั้งการดึง Pages อัตโนมัติ และการตั้งค่า Menu เอง) ให้คุณอัปเดต CSS ใน header.php หรือ style.css ด้วยชุดนี้ครับ ผมเจาะจงคลาสมาตรฐานของ WordPress ให้แล้ว:

1. อัปเดต CSS (เน้นความเด็ดขาดของ Dropdown)

CSS

/* --- เมนูหลัก --- */
.nav-list, .auto-menu, .main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation li {
    position: relative; /* ให้ลูกอ้างอิงตำแหน่งจากแม่ */
}

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

/* --- แสดงผลเมื่อ Hover --- */
.main-navigation li:hover > ul, 
.main-navigation li:hover > .sub-menu, 
.main-navigation li:hover > .children {
    display: block; /* สั่งให้แสดงผล */
}

/* --- ตกแต่งรายการใน Dropdown --- */
.main-navigation li ul li a, 
.main-navigation li .sub-menu li a, 
.main-navigation li .children li a {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: normal;
    border-bottom: 1px solid #f9f9f9;
    white-space: nowrap; /* กันข้อความขึ้นบรรทัดใหม่ */
}

.main-navigation li ul li a:hover {
    background: #f4f4f4;
    color: #0056b3;
}

2. เช็คที่ functions.php อีกนิด

เพื่อให้แน่ใจว่า WordPress จะส่งชั้นลูกออกมาด้วย ให้เช็คค่า depth ในฟังก์ชัน insurance_auto_menu ครับ:

PHP

function insurance_auto_menu() {
    if ( has_nav_menu( 'main-menu' ) ) {
        wp_nav_menu( array( 
            'theme_location' => 'main-menu', 
            'menu_class'     => 'nav-list',
            'container'      => false,
            'depth'          => 2 // ดึงมา 2 ชั้น
        ) );
    } else {
        echo '<ul class="nav-list">';
        wp_list_pages( array( 
            'title_li' => '', 
            'depth'    => 2, // สำคัญ: ต้องเป็น 2 เพื่อให้ดึงหน้าย่อยออกมา
            'container' => false 
        ) );
        echo '</ul>';
    }
}

3. วิธีแก้ปัญหา “ถ้ายังไม่ Drop” (Technical Check)

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

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

CSS

.main-navigation li:hover > ul {
    display: block !important;
}

ลองอัปเดต CSS ชุดนี้ดูครับ ผมมั่นใจว่ารอบนี้ Dropdown จะทำงานเพราะเราครอบคลุมคลาส .sub-menu และ .children ซึ่งเป็นมาตรฐานของ WordPress แล้วครับ!