메가 메뉴 문제

Question

메가 메뉴가 있습니다. 두 가지 문제가있었습니다.

1. 각 섹션 위로 마우스를 가져 가면 마우스 오버 상태를 유지할 수 없습니다.
2. 메가 메뉴를 트리거하는 헤더 태그는 컨테이너의 너비가있는 것 같습니다. 이렇게하면 시각적으로 롤오버하지 않아도 메가 메뉴가 팝업됩니다. 나는 hoverintent 플러그인을 사용하고 http://www.boyga.com/mega-menu/

   :

나는 여기에 메가 메뉴 내 현재 코드를 기록했다.

Answer 1

문제 # 2는 쉽게 고칠 수 있습니다. 이 CSS 규칙을 스타일 시트에 추가하십시오 :

ul#Top-Nav { 
    display: inline-block; 
} 

# 1은 거의 비슷합니다. 더 많은 CSS가 변경되었습니다. <li>가 아니라 <a>에서 하위 메뉴 하강, 당신은 a:hover 및 a:active을 포함하여 CSS 규칙을 변경해야하기 때문에 :

ul#Top-Nav li:hover a{color:#1E90FF;text-decoration:none;} 
    ul#Top-Nav li:hover a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;} 
    ul#Top-Nav li:active a{background:#1E90FF url(arrow.png) no-repeat right center;color:#fff;} 

이 적어도 크롬에 나를 위해 작동합니다. :hover 및 :active 의사 클래스가 거품을 일으키지 않는 다른 브라우저에서 문제가 발생할 수 있습니다 (아마 : 읽을 수 있음).