二级图片导航效果

导航为图片且切换时也需图片，带下拉二级菜单的，图片选中前后状态要求规则命名，id不能在同一文件里重复出现

$("#menunav li").each(function () {

    $(this).mouseover(function () {
  
     $(this).find(".subnav").show();
     $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menu_", "menuhover_"));
     

     $(this).hover(function () {
     }, function () {
      $(this).find("a").find("img").attr("src", $(this).find("a").find("img").attr("src").replace("menuhover_", "menu_"));
      $(this).find(".subnav").hide();
  
     });
    })
    });

注意mousehover（当鼠标点击子菜单时主导航仍处于选中状态）同hover的区别

<ul class="menunav">
            <li><a href="" rel="images/menuhover_05.gif"><img src="images/menu_05.gif" alt="教学成果"/></a>
             <ul class="subnav"  style="display:none;">
                 <li><a href="#">安全宝典</a></li>
                    <li><a href="#" class="cur">创意体能活动</a></li>
                    <li><a href="#">音频视频</a></li>
                </ul>
            </li>

        </ul>

转载于:https://www.cnblogs.com/aimyfly/archive/2012/05/04/2483124.html