菜单下面有子菜单。如何让停留在wordpress学习计划 的主菜单上显示下面两个子菜单 。wordpress 代码怎么实现

发布日期：2026-06-05  - 分类：Blog网站建站 - - 评论：暂无评论

菜单下面有子菜单。如何让停留在wordpress学习计划 的主菜单上显示下面两个子菜单 。wordpress 代码怎么实现

 

你在 WordPress 后台（图 1）已经把菜单的层级关系设置得非常完美了！

前台（图 2）没有显示下拉菜单，通常不是你的设置有问题，而是你的主题缺少了相应的 CSS（层叠样式表）代码。

当你在后台设置了子菜单，WordPress 默认在输出 HTML 时，已经把子菜单包含在父菜单的标签里面了。浏览器只是按照当前的 CSS 把它们隐藏了，或者和主菜单挤在了一起。

要实现鼠标悬停显示下拉菜单，我们需要分两步来检查和添加代码：

第一步：确认 PHP 代码（HTML 结构输出）

请打开你的主题文件 header.php（通常导航代码在这里），找到输出菜单的地方。

确保你是使用 WordPress 官方的动态菜单函数来调用菜单的，代码看起来应该类似于这样：

PHP

<div id="menu">
    <?php wp_nav_menu( array( 'menu' => 'menu1' ) ); ?>
</div>

(注：如果你的 header.php 里已经是使用 wp_nav_menu 输出的，那这一步不用做任何修改。)

第二步：添加下拉菜单的 CSS 代码（核心修复）

这是最关键的一步。我们需要告诉浏览器：“平时把子菜单藏起来，当鼠标放上去时，把它作为下拉框弹出来”。

请打开你的 style.css 文件，滚动到最底部，将下面这段我为你量身定制的下拉菜单样式复制粘贴进去：

CSS

/* ---- 实现导航栏下拉子菜单 ---- */

/* 1. 让父级菜单变为定位基准，防止子菜单乱跑 */
#menu li {
    position: relative; 
}

/* 2. 默认隐藏子菜单，并让它悬浮在网页上方（绝对定位） */
#menu li ul {
    display: none;        /* 默认隐藏 */
    position: absolute;   /* 绝对定位，脱离原本的排版 */
    top: 40px;            /* 距离顶部的距离，对应你主菜单的高度 */
    left: 0;              /* 左侧对齐父菜单 */
    margin: 0;
    padding: 0;
    width: 160px;         /* 下拉菜单的宽度，可根据你的文字长度修改 */
    background: #A03128;  /* 下拉菜单的背景色（使用了你主题里的深红色） */
    z-index: 9999;        /* 确保下拉菜单层级最高，不会被下方的文章遮挡 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 加一点阴影更有立体感 */
}

/* 3. 核心特效：当鼠标悬停 (hover) 在父级 li 上时，显示里面的 ul 子菜单 */
#menu li:hover > ul {
    display: block;
}

/* 4. 调整子菜单内部元素的排版（让它们上下垂直排列，而不是左右浮动） */
#menu li ul li {
    float: none;          /* 取消原来的左浮动 */
    width: 100%;          /* 宽度占满 */
    border-bottom: 1px solid #7b241d; /* 子菜单之间的分割线 */
}

/* 5. 美化子菜单里的文字链接 */
#menu li ul li a {
    display: block;
    background: none;     /* 去掉主菜单那个背景图片 */
    height: auto;
    line-height: normal;
    padding: 12px 15px;   /* 调整文字周围的间距 */
    color: #FFFFFF;
    font-size: 12px;
}

/* 6. 鼠标悬停在子菜单项上时的颜色变化 */
#menu li ul li a:hover {
    background: #7b241d;  /* 鼠标放上去时背景变深 */
    text-decoration: none;
}

操作小结：

粘贴并保存 style.css 后，回到你的网站前台，按下 Ctrl + F5 强制刷新页面。

现在，把鼠标移动到“wordpress学习计划”上，漂亮的深红色下拉菜单就会自动弹出来了！你可以根据实际效果，再去微调代码里的宽度 (width) 和背景颜色 (background)。

为了保持代码的整洁和可读性，最完美的做法是将下拉菜单的代码直接整合进你现有的 /* Menu */ 区域中。

这样可以将所有控制导航栏的样式集中放在一起，以后修改起来非常方便。

修改方案：直接替换 /* Menu */ 这一段

请在你的 style.css 文件中找到原本的 /* Menu */ 部分（大约在代码的中部），将它完整替换为下面这段整合后的新代码：

CSS

/* Menu */

#menu {
	width: 960px;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img03.jpg) repeat-x left top;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 25px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float:left;
	position: relative; /* 【整合新增】让父级菜单变为子菜单的定位基准，防止子菜单乱跑 */
}

#menu li a {
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 5px 20px;
	background: url(images/img06.jpg) no-repeat right 10px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
}

#menu .current_page_item a {
	padding-left: 0;
}

#menu a:hover {
	text-decoration: underline;
}

/* ========================================================
   ▼ 以下为整合进来的下拉子菜单核心代码，紧跟在菜单主体后面
   ======================================================== */

/* 1. 默认隐藏二级子菜单列表，并让它悬浮在网页上方（绝对定位） */
#menu li ul {
	display: none;        /* 默认隐藏 */
	position: absolute;   /* 绝对定位，脱离原本的水平排版 */
	top: 40px;            /* 距离顶部的距离，刚好对应你主菜单的 40px 高度 */
	left: 0;              /* 左侧对齐父菜单 */
	margin: 0;
	padding: 0;
	width: 160px;         /* 下拉菜单的宽度，可根据你的文字长度修改 */
	background: #A03128;  /* 下拉菜单的背景色（使用了你主题里的深红色） */
	z-index: 9999;        /* 确保下拉菜单层级最高，不会被下方的文章或图片遮挡 */
	box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 加一点阴影更有立体感 */
}

/* 2. 核心特效：当鼠标悬停 (hover) 在父级 li 上时，显示里面的 ul 子菜单 */
#menu li:hover > ul {
	display: block;
}

/* 3. 调整子菜单内部元素的排版（让它们上下垂直排列，而不是像主菜单那样左右浮动） */
#menu li ul li {
	float: none;          /* 取消原来的左浮动 */
	width: 100%;          /* 宽度占满 */
	border-bottom: 1px solid #7b241d; /* 子菜单之间的暗红色分割线 */
}

/* 4. 重置美化子菜单里的文字链接样式 */
#menu li ul li a {
	display: block;
	background: none;     /* 去掉主菜单那个小箭头的背景图片 (img06.jpg) */
	height: auto;
	line-height: normal;
	padding: 12px 15px;   /* 增加上下左右内边距，方便手指或鼠标点击 */
	color: #FFFFFF;
	font-size: 12px;
}

/* 5. 鼠标悬停在子菜单项上时的变色反馈 */
#menu li ul li a:hover {
	background: #7b241d;  /* 鼠标放上去时背景色变深 */
	text-decoration: none;
}

为什么位置选在这里最好？

  1. 结构清晰：所有的菜单样式（一级的、二级的、悬停的）都集中在了 /* Menu */ 模块中。日后你若想微调导航栏的字体、颜色、高度，直接查阅这个区域即可。

  2. 完美融合：原本代码中的 #menu li 只有一行 float:left;，现在我们在它内部加上了 position: relative;，这样既保留了主菜单横向排列的特性，又成功给子菜单定好了坐标锚点。

保存好 style.css 后，回到前台页面按 Ctrl + F5 强刷，鼠标放上去就能看到完美的下拉效果了！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注