首先，你可以在新的WordPress中使用菜单功能。

首先，您希望激活一个事实，即您希望通过功能使用此功能。php文件。

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
\'primary\' => __( \'Primary Navigation\', \'your_theme_name\' ),  
\'secondary\' => __(\'Secondary Navigation\', \'your_theme_name\')  
) ); 

上面的代码定义了是否有多个菜单。如果只需要一个菜单，请删除辅助菜单。如果这样做，函数中会出现类似的情况。php文件：

// This theme uses wp_nav_menu() in two locations.  
register_nav_menus( array(  
\'primary\' => __( \'Primary Navigation\', \'your_theme_name\' )
) );

现在，您可以通过后端外观下的菜单选项添加页面项。

接下来，在您的主题中，您需要将此添加到希望菜单显示的位置：

<?php wp_nav_menu( array( \'container_class\' => \'menu-header\', \'theme_location\' =>   \'primary\' ) ); ?>

术语“menu header”将是放入菜单的div标记的类。您可以将其更改为希望div标记位于主题中的任何类。

接下来，其他一切都完全通过CSS完成。

/*****************************************
Style declarations for Top Menu
*****************************************/
.menu-header {
margin-right: auto;
margin-left: auto;
z-index: 10;
}

.menu-header li {
display: inline;
list-style: url(none) none;
float: left;
}

.menu-header ul {
line-height: 31px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.menu-header a, .menu-header a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}

.menu-header a, .menu-header a:visited {
color:#990000;
display:block;
padding:0 20px;
}

.menu-header a:hover, .menu-header a:active, .current_page_item a, #home .on, .menu-footer a:hover {
text-decoration:underline;
}

.menu-header li ul {
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}

.menu-header li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:220px;
}

.menu-header li li a, .menu-header li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}

.menu-header li li a:hover, .menu-header li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
text-decoration: none;
}

.menu-header li:hover ul, .menu-header li li:hover ul, .menu-header li li li:hover ul,   .menu-header li.sfhover ul, .menu-header li li.sfhover ul, .menu-header li li li.sfhover ul     {
left:auto;
}

只需做您需要的更改，使其看起来像您发布的示例。