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

Question

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

我不知道为什么会发生这种情况;标题导航栏是页脚导航的副本，可以正常工作。有人能指出这个头文件nav有什么用吗？

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; 
} 

完成上述更改后，它应该可以正常工作。