Question

我有一个网页，当用户将鼠标悬停在主父菜单中的a：链接上时，使用jquery显示子菜单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); 
});

问题是，我希望这个网页的导航功能独立于javascript。因此，当用户没有启用javascript时，菜单仍会显示 - 只是没有滚动或淡入淡出的效果。

感谢。

Answer 1

使用:hover CSS伪类。

.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/

在没有javascript的情况下在悬停时显示子菜单

3 个答案: