为什么这个CSS菜单上的悬停区域如此之大？

Question

我有一个标题导航，其中悬停区域似乎与subnav li的高度相对应，而不仅仅是顶级的a-tag。

我不知道为什么会这样;标题导航是页脚导航的副本，它可以正常工作。有人可以指出这个标题导航的工作原理吗？

link to actual page

Answer 1

这种情况正在发生，因为您正在使用opacity来隐藏/显示sub-menu，而不是使用display: block和display: none。您需要像这样修改CSS：

#main_nav ul li ul {
    margin: 0 0 0 0;
    padding: 1em .2em 0 .4em;
    background: rgb(200,245,190);
    border-top: 1px solid rgb(0,0,0);
    box-shadow: 2px 2px 4px rgb(120,120,120);
    position: absolute;
    display: hidden;
    opacity: 0;
}

从上方移除opacity: 0并使用display: none代替display: hidden，以便它变为：

#main_nav ul li ul {
    margin: 0 0 0 0;
    padding: 1em .2em 0 .4em;
    background: rgb(200,245,190);
    border-top: 1px solid rgb(0,0,0);
    box-shadow: 2px 2px 4px rgb(120,120,120);
    position: absolute;
    display: none;
}

---

#main_nav ul li:hover ul {
    display: block;
    opacity: 1;
    transition-delay: 0s;
}

从上面的CSS中删除opacity: 1，使其变为：

#main_nav ul li:hover ul {
    display: block;
}

在进行上述更改后，它应该可以正常工作。