자바 스크립트없이 마우스 오버시 서브 메뉴 표시

Question

jQuery를 사용하여 메인 부모 메뉴의 a : 링크 위로 마우스를 가져 가면서 하위 메뉴 div를 표시하는 웹 페이지가 있습니다.

$('.menu ul li').hover(function() { 
    $(this).find('.dropnav').stop(true, true).fadeTo('fast', 1); 
}, function() { 
    $(this).find('.dropnav').stop(true, true).fadeOut(800, 0); 
}); 

문제는이 웹 페이지의 탐색 기능이 자바 스크립트와 무관하다는 것입니다. 따라서 사용자가 자바 스크립트를 사용하지 않으면 메뉴가 계속 표시됩니다. 스크롤 또는 페이드 효과가없는 것입니다.

감사합니다.

Answer 1

CSS 의사 클래스 :hover을 사용하십시오.

.menu ul li:hover .dropnav { 
    opacity: 1; 
    /* display: block; ? */ 
} 

Answer 2

다음은 CSS 기반 메뉴의 견고한 예입니다. IE6에 대한 하위 호환성을 찾고 있다면 JavaScript가 함께 제공됩니다.

http://qrayg.com/learn/code/cssmenus/

Answer 3

HTML

<ul class="main-nav"> 
     <li><a href="#">main nav-1</a>   
     </li> 
     <li><a href="#">main nav-2</a>  
      <ul class="sub-nav"> 
      <li><a href="#">sub-nav-2.1</a></li> 
      <li><a href="#">sub-nav-2.2</a></li> 
      <li><a href="#">sub-nav-2.3</a></li> 
      </ul> 
     </div> 
     </li> 
    <li><a href="#">main nav-3</a> 
    <li><a href="#">main nav-4</a> 
    </ul> 

CSS

ul.main-nav > li { position: relative; display: block; float: left; margin: 0 15px;} 
ul.main-nav > li > a {display: block; line-height: 40px; } 
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;} 
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; } 

체크 라이브 데모 http://jsfiddle.net/q9YZf/