Css 悬停不适用于整个区块

我正在尝试为整个锚元素创建悬停效果，但它不起作用，一旦鼠标离开文本，下拉菜单就会消失：

这是试验场地

Css:

---

我哪里弄错了？

锚元素有文本大小，没有其他内容。 链接和链接之间的空间是li的右边距

除去

li {margin_right: 40px}

设定

a {padding_right: 40px}

---

锚元素具有文本的大小，而没有其他内容。 链接和链接之间的空间是li的右边距

除去

li {margin_right: 40px}

设定

a {padding_right: 40px}

CSS添加：

.menu li a {
    position: relative;
    z-index: 5;
}

CSS添加：

.menu li a {
    position: relative;
    z-index: 5;
}

试试这个：

.menu > li:hover .sub_navigation {
    display: block;
}

试试这个：

.menu > li:hover .sub_navigation {
    display: block;
}

---

在您的例子中，是因为div滑块容器与header div重叠。我看到滑块容器是绝对的

在这种情况下，您可以在TOP属性上添加额外的20-30px，并去掉padding TOP

另一件事就是添加position:relative和z-index:10，例如在header div上

---

在您的例子中，是因为div滑块容器与header div重叠。我看到滑块容器是绝对的

在这种情况下，您可以在TOP属性上添加额外的20-30px，并去掉padding TOP

另一件事就是添加position:relative和z-index:10，例如在header div上

---

但是鼠标悬停的下划线效果不起作用correctly@MrA我不知道它应该如何工作，是你写的代码，不是我写的，这与问题有点无关。但是鼠标悬停的下划线效果不起作用correctly@MrA我不知道它是怎么工作的你为此编写了代码，不是我，这和问题有点无关。