CSS 更改活动导航菜单页面的设置背景

Question

我有http://camerabeanbags.co.uk/test这个网站在顶部的导航菜单上，当您将鼠标悬停在菜单上的文本上时，您可以看到文本后面显示灰色背景。

我可以使用什么 CSS 代码让灰色背景显示在活动页面后面？因此，如果我在主页上，那么菜单上主页文本后面会显示灰色背景吗？

谢谢，

哈维

Answer 1

您可以使用：

li.current-menu-item:hover > a {
  background: #e8e8e8;
}

Answer 2

无需为您的代码添加背景或任何内容。

li.current-menu-item a,
nav a:active,
nav a:focus {
  color: #406639 !important;
}
li.current-menu-item a:before,
nav a:active:before,
nav a:focus:before {
    transform: scaleX(1);
}

这将触发悬停状态的默认样式。

编辑：我已经用您需要的全部内容更新了答案。 :) 请注意，我必须添加 Important，因为您在此选择器上有 important：

a:focus {
 color: #c9c9c9 !important;
 text-decoration: none;
}

Answer 3

正如我所见，您使用了 ::before 作为悬停时的背景效果...要使其处于活动状态，您可以使用：

nav li.active a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #e8e8e8;
transform: scaleX(0);
transition: transform .25s;}

另外，需要加上active class with li

CSS 更改活动导航菜单页面的设置背景

CSS to change set background of active nav menu page

css

wordpress

menu

nav

web