Html css菜单不在指定位置下拉

我对制作网站很陌生，我做这件事主要是作为一种爱好，现在我正在为我的一个朋友制作一个网站

到目前为止，一切都很顺利，但我正在努力准备菜单。（它也是wordpress网站。）

您可以在

设计是很好的，但问题仍然存在，当你下面的下拉菜单。有一种范围，您可以将鼠标悬停在菜单下拉不可接受的位置，仅当您将鼠标悬停在父链接上时

我可以看到我自己的ul.子菜单的高度太高，但我找不到它。在这个小问题之后已经找了好几天了

提前谢谢你们帮了我的忙

代码：

---

将“不透明度：1”（不透明度：0）替换为“display:block；”（“display:none”）

您的问题是，悬停会更改布局（当父对象未悬停时，内容会占用更多空间，即使它们是隐藏的），但这也是因为您仅在更改

不透明度，隐藏内容时，用户仍可以将其悬停

我通过转换
可见性
和
不透明度
解决了这个问题，这意味着当内容不可见时，您不能再将鼠标悬停在其上：

.nav-menu li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-menu li:hover ul {
    padding-top: 5px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s, visibility 0.8s;
}

非常感谢。我应该给你买杯啤酒！
.nav-menu li ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-menu li:hover ul {
    padding-top: 5px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s, visibility 0.8s;
}