Отображение подменю при наведении курсора без javascript

Question

У меня есть веб-страница, которая использует jquery для отображения подменю div, когда пользователь зависает над ссылкой a: в главном родительском меню.

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

Проблема в том, что эта функция навигации этой веб-страницы не зависит от javascript. Поэтому, когда пользователи не поддерживают javascript, меню все равно будет отображаться - без эффектов свитков или затухания.

Спасибо.

Answer 1

Использовать псевдо-класс CSS :hover.

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

Answer 2

Вот довольно солидный пример меню на основе CSS. Есть JavaScript, который идет с ним, если вы ищете обратную совместимость с IE6.

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/