Css 努力使嵌套锚定与父行项目的大小相同

我在一个Wordpress网站上工作，并没有完全遵循提供给我的html和css

我有一条规则，当菜单项悬停时，将行项目的背景设置为橙色，嵌套的锚文本设置为白色：

.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);

然后：

第一条规则有效，第二条规则无效。使用inspect元素功能时，我注意到当我应用此规则时，它会被划掉。当我应用规则

outline:solid 1px

查看嵌套锚定时，当我的目标是使其与大小匹配时，它确实比父行项目小

这是导航：

请注意，当您将鼠标悬停在菜单项上时，文本仅在您将鼠标悬停在中间（内部

a

标记）时变为白色。内部

a

标记的大小应与父标记的大小相同，以便悬停时，行项目的任何部分上的文本都将变为白色

---

希望我说的是有道理的。如果您查看小提琴，您将了解我的意思。

由于列表项没有明确的

宽度和/或
高度，因此我们无法正确更改锚定标记的大小以填充每个列表的整个空间

但是，您可以通过在锚点标记上添加填充而不是列表项来实现这一点：


。下拉列表{
/*填充：7px 10px；*//*删除此声明*/
边界：无；
右边框：2件纯色浅蓝色；
背景色：透明；
}
.下拉列表ul li a{
显示：块；
填充：7px 10px；/*改为添加此*/
}
在这种情况下，不需要使锚点元素与其父元素的大小相同，只需根据父元素的悬停将效果应用于锚点即可。您可以通过更改选择器以匹配
li
悬停而不是
a
悬停来实现这一点

.dropdown > ul li:hover > a {
    color: white;
}

非常感谢，我刚刚更新了样式表，解决了我的问题哦。知道这一点也很有用如果我早知道的话，我可能已经走了那条路
.dropdown > ul li:hover > a {
    color: white;
}