您将要创造的
导航菜单吸引了片刻的关注。 从用于移动设备的汉堡菜单到用于商店的大型菜单 ，再到用于增强用户体验的便利菜单 ，您可以在WordPress网站中呈现导航菜单的方式有多种选择。
但是，如果您想创建一个简单的菜单，其中包含一些顶级项目，当用户将鼠标悬停在菜单上时，又有一些其他项目从下拉菜单中删除？
在开始对大型菜单（例如，大型菜单和汉堡菜单）进行编码之前，最好学习如何创建下拉菜单。 这将在您可能想不到的更多站点上有用（并非每个站点都需要精美的菜单），并且它将为您提供开始构建更高级菜单所需的基础。
在本教程中，我将向您展示如何在WordPress主题中创建一个下拉菜单，并使用CSS定位WordPress菜单功能输出HTML。 该功能旨在用于您自己编写的主题，而不是用于第三方主题，该主题已经有自己的菜单。 但是，如果您正在使用菜单不在下拉菜单中的第三方主题，并且要添加此主题，则需要创建一个子主题并将菜单代码添加到该主题。
您需要什么
要遵循本教程，您需要：
- WordPress的开发安装
- 您自己编写的主题，或者要修改菜单的第三方主题的子主题
- 代码编辑器
WordPress的内置菜单功能
您需要了解的第一件事是WordPress如何生成菜单。 与静态网站不同，菜单不会硬编码到您的网站中。 取而代之的是，WordPress使用PHP函数来查询数据库并获取导航菜单项，然后以正确的结构显示它们。
导航菜单中的每个项目实际上都是数据库wp_posts表中的一个帖子-不是普通的帖子，而是一种特殊的帖子，仅用于导航菜单项，其元数据包括要显示的文本和目标的链接。
在您的主题中，打开header.php文件。 您应该可以找到以下行：
wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );根据参数的不同，您的函数可能看起来有些不同，但是让我们分解上面的示例，看看每个元素的作用：
-
wp_nav_menu()是获取导航菜单并将其输出的函数。 - 然后将参数包装在
array。 -
container_class是CSS类，将赋予包装菜单的容器。 在这种情况下，它是main-nav。 这就是我们稍后将通过CSS定位的目标。 -
theme_location => primary告诉WordPress这是主要的导航。 如果我在管理屏幕中创建一个菜单并选中“ 主要”框，则此菜单将用于代码中的该位置。
有时，您可能想在主题的其他位置（例如在页脚中）添加导航菜单，在这种情况下，您不想使用theme_location => primary 。 您只能将其用于一个菜单。 但是您可能想要使用其他参数，可以在wp_nav_menu()的WordPress手册页面中找到这些参数。
这是“ 菜单”管理屏幕中主要导航的复选框：
wp_nav_menu()函数输出的代码
在添加CSS创建下拉菜单之前，熟悉WordPress为菜单生成的代码将很有帮助。
这是小型企业的典型菜单，显示在“菜单”管理屏幕中：
现在是该菜单HTML输出：
如果检查该代码，您将看到它包含：
- 在
wp_nav_menu()函数中定义的具有main-nav类的div。 - 在其中，一个带有ID
menu-navbar和classmenu的ul。 这些是WordPress定义的默认值。 - 在其中，有多个
li元素，每个li元素具有menu-item menu-item-type-post_type类的menu-item menu-item-type-post_type，以及其他特定于菜单项所导致的发布类型以及当时菜单项状态的类。 每个人还具有唯一的ID，其编号对应于数据库中导航菜单项的发布ID。 - 在
li元素之一内部是另一个ul，其内部具有自己的li元素-第二级菜单项。 当用户将鼠标悬停在顶层菜单项上时，我们希望将其删除。
编码CSS以创建下拉菜单
因此，现在我们知道WordPress正在输出什么，我们可以确定要使用CSS定位的元素。
我们想要实现以下两点：
- 打开页面时，第二级菜单项被隐藏。
- 当用户将鼠标悬停在顶级项目上时，将显示在其下方的第二级项目。
默认情况下隐藏第二级项目
在主题的样式表中，默认情况下先隐藏第二级项目。
添加此：
.main-nav ul ul {
display: none;
} 这会将ul元素隐藏在main-nav元素内的另一个ul元素内。 但是，它不会隐藏顶级ul元素，因为它需要将一个ul嵌套在菜单中的另一个ul内。
现在，如果您打开页面并尝试查看第二级项目，则将不可能—它们将被隐藏。 让我们修复它。
使第二级项目出现在悬停上
现在，我们需要确保当顶级li悬停在其上方时，将显示嵌套在顶级li中的ul 。
将此添加到您的样式表：
.main-nav ul li:hover > ul {
display: block;
} 现在，将鼠标悬停在顶级项目上时，将显示其下方的列表。 但是您会发现它不会以您想要的方式显示。 具体来说，它将下推菜单下的内容。 我们希望它看起来像是漂浮在内容之上。 要解决此问题，我们需要在ul ul元素中添加一些布局样式。
将布局样式添加到第二级列表
打开样式表并找到带有display: none的行display: none 。 编辑该块以添加布局样式：
.main-nav ul ul {
display: none;
position: absolute;
top: 3em;
left: 0;
z-index: 99999;
width: 180px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}您还需要给顶级列表项指定相对位置：
.main-nav li {
position: relative;
}让我们看一下该代码的作用：
-
position: absolute为第二级列表提供绝对定位，将其从页面中的元素流中移出。 对于较高级的项目，position: relative将顶层列表放在页面流中，并允许在其中放置绝对定位的元素。 -
top: 3em将列表的顶部相对于其内部元素的顶部（即顶级列表项）定位。 此3em值反映了顶级导航栏的高度。 如果顶层导航的高度不同，请编辑您的导航。 -
left: 0将列表相对于其上方的项目置于左侧。 -
z-index: 99999定义元素在页面的三维模型中的位置。 较高的值99999确保将其显示在所有其他内容的顶部。 - 剩下的代码给出了列表的宽度，并为其添加了显示样式，其中包括一个阴影，使其看起来好像在页面顶部。
现在让我们看一下将鼠标悬停在顶级项目上会看到什么：
有用！ 当我将鼠标悬停在顶层项目上时，将显示下拉菜单。
下拉菜单对于小型多层菜单很有用
当您的站点需要一个具有多个级别的菜单，但是在顶级菜单之外不需要很多链接时，下拉菜单是实现此目的的最简单方法。 我用来演示此内容的站点的菜单中只有一个项目，而其下还有其他项目，而其中只有三个。 使用大型菜单会显得过大，而单级菜单将不允许我显示所需的所有内容。
能够将这样的菜单添加到主题中，将为您的菜单提供更大的灵活性，并增强用户体验。 您只需要几行CSS就可以做到。
翻译自: https://code.tutsplus.com/tutorials/how-to-make-a-drop-down-menu-in-wordpress--cms-32991