我正在开发一个WordPress网站，并试图正确显示我的菜单。如何显示所有父项，但仅在选择其父项时显示子项。我希望这是有道理的。以下是我努力实现的目标：

（图像不再可用）

下面是目前的基本情况：

（图像不再可用）

这是我的CSS代码：

/*** Single Level ***/
#widget_nav_menu, #widget_nav_menu ul {
    clear: both;
    float: left;
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;

}
    #widget_nav_menu a {
        display: block;
        font-family: Arial, sans-serif;
        font-size: 13px;
        color: #174267;
        text-decoration: none;
        padding: 7px 0px 7px 7px;
    }
    #widget_nav_menu a:current,
    #widget_nav_menu a:hover {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        position: absolute;
        z-index: 1005;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li.current_page_item a {
        width: 213px;
        background-image: url(images/hover_bg.png);
        background-position: right -5px;
        color: #fff;
        margin-right: -17px;
    }
    #widget_nav_menu li {
        float: left;
        background: #f4f8fa;
        width: 202px;
        border-bottom: 1px solid #c3ced5;
        height: 34px;
        text-indent: none;
        color: #174267;
    }

        #widget_nav_menu li ul {
            position: absolute;
            width: 213px;
            left: -999em;
        }
        #widget_nav_menu li:hover ul {
            left: auto;
        }

        #widget_nav_menu li:hover ul, #widget_nav_menu li.sfhover ul {
            left: auto;
        }

            /*** Multi Level ***/
            #widget_nav_menu li ul ul {
                margin: -1em 0 0 10em;
            }

            #widget_nav_menu li:hover ul ul, #widget_nav_menu li.sfhover ul ul {
                left: -999em;
            }

        #widget_nav_menu li ul li.current_page_item a:hover {
            width: 213px;
            background-image: url(images/hover_bg.png);
            background-position: right -5px;
            color: #fff;
            margin-right: -17px;
        }

我不确定是否需要使用a:first-child 和a:last-child 伪选择器等。有人能解释一下吗？我想我已经完成了一半，只需要让子项位于父项之间，而不是下拉覆盖。。。

function hierarchical_submenu_get_children($post, $current_page) {
$menu = null;
// Get all immediate children of this page
$children = get_pages(\'child_of=\' . $post->ID . \'&parent=\' . $post->ID . \'&sort_column=menu_order&sort_order=ASC\');
if ($children) {
    $menu = "\\n<ul>\\n";
    foreach ($children as $child) {
        // If the child is the viewed page or one of its ancestors, highlight it
        if (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID)) {
            $menu .= \'<li class="sub-menu"><a href="\' . get_permalink($child) . \'" class="sub-menu current-item">\' . $child->post_title . \'</a>\';
        } else {
            $menu .= \'<li><a href="\' . get_permalink($child) . \'">\' . $child->post_title . \'</a>\';
        }
        // If the page has children and is the viewed page or one of its ancestors, get its children
        if (get_children($child->ID) && (in_array($child->ID, get_post_ancestors($current_page)) || ($child->ID == $current_page->ID))) {
            $menu .= hierarchical_submenu_get_children($child, $current_page);
        }
        $menu .= "</li>\\n";
    }
    $menu .= "</ul>\\n";
}
return $menu;

<?php echo hierarchical_submenu($post); ?>