爲什麼這個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; 
} 

完成上述更改後，它應該可以正常工作。