เมนูไม่มี ไม่ดรอป

อาการนี้เกิดจาก CSS ของเมนู ยังไม่ได้รองรับการทำ Dropdown (เมนูชั้นที่ 2) และโครงสร้าง HTML ของ WordPress เวลาดึงเมนูอัตโนมัติมา มันจะมี Class เฉพาะของมันครับ

เพื่อให้เมนู “แสดงผล” และ “Drop ลงมาได้” เวลาเราเอาเมาส์ชี้ รบกวนคุณอัปเดตไฟล์ดังนี้ครับ:

1. แก้ไข header.php (ส่วน CSS)

เพิ่ม CSS ชุดนี้เข้าไปในส่วน <style> เพื่อรองรับการทำ Dropdown และแก้ปัญหาเมนูหายครับ:

CSS

/* จัดการแถบเมนูหลัก */
.main-navigation {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0;
}

/* จัดลิสต์เมนู */
.nav-list, .auto-menu, .main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* สไตล์ตัวอักษรเมนู */
.main-navigation li {
    position: relative; /* สำคัญสำหรับการทำ Dropdown */
}

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

.main-navigation a:hover {
    background: #f8f9fa;
    color: #0056b3;
}

/* --- ระบบ Dropdown (เมนูชั้นที่ 2) --- */
.main-navigation li ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    display: none; /* ซ่อนไว้ก่อน */
    flex-direction: column;
    z-index: 999;
}

.main-navigation li ul li a {
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

/* เมื่อเอาเมาส์ชี้ ให้แสดง Dropdown */
.main-navigation li:hover > ul {
    display: flex;
}

2. แก้ไขฟังก์ชันใน functions.php

ปรับให้ตัว Auto Menu รองรับการดึงหน้าย่อย (Hierarchical) มาทำเป็น Dropdown ครับ:

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 
        ) );
    } else {
        // ดึง Pages มาโชว์ และรองรับโครงสร้างชั้นย่อย (Dropdown)
        echo '<ul class="nav-list">';
        wp_list_pages( array( 
            'title_li' => '', 
            'depth'    => 2, // ดึงมา 2 ชั้นเพื่อทำ Dropdown
            'container' => false 
        ) );
        echo '</ul>';
    }
}

3. ตรวจสอบที่หน้าจัดการ WordPress

ถ้าคุณสร้างเมนูเองที่ Appearance > Menus:

1. ให้ ลากเมนูย่อยเยื้องไปทางขวา (ให้มันอยู่ใต้เมนูหลัก)
2. ติ๊กที่ตำแหน่ง Main Menu (Top) 3. กดบันทึก

ทำไมก่อนหน้านี้ไม่แสดง?

1. ไม่มี position: relative: ทำให้ตัว Dropdown กระเด็นไปอยู่ที่อื่น
2. ไม่มี display: none / hover: ทำให้เมนูชั้นที่ 2 กางออกมาทับหน้าหลักจนดูเละ หรือไม่ยอมแสดงผลเลย
3. ขาด CSS พื้นฐาน: ธีมที่เราสร้างใหม่ไม่มี CSS ของเดิมจาก DarkNews มาช่วยครับ เราเลยต้องเขียนเองทั้งหมด

ลองอัปเดต CSS และฟังก์ชันดูอีกครั้งครับ รอบนี้เมนูควรจะแสดงและสามารถ Drop ลงมาได้เมื่อเอาเมาส์ชี้ครับ!