Почему в этом CSS-меню так сильно нависает область?

Question

У меня есть заголовок nav, в котором область зависания, по-видимому, соответствует высоте subnav li, а не только а-тегу верхнего уровня.

Я понятия не имею, почему это происходит; заголовок nav является копией нижнего колонтитула, который работает правильно. Может ли кто-нибудь указать, что работает с этим заголовком 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; 
} 

Удалить opacity: 1 из CSS выше, чтобы оно стало следующим:

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

Он должен отлично работать после внесения вышеуказанных изменений.