<ul id="globalNav" >
  <li id="gn-home"><a href="">网站首页</a></li>
  <li id="gn-about" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"  class="aa"><a href="" class="bb">关于霖鹰</a>
    <ul>
      <li id="sm-1"><a  href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-22"><a  href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a  href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-news"><a href="">新闻中心</a></li>
  <li id="gn-product"><a href="">产品中心</a></li>
  <li id="gn-case"><a href="">应用案例</a></li>
  <li id="gn-service" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" class="aa"><a href="" class="bb">客户服务</a>
    <ul>
      <li id="sm-1"><a  href="#" class="cc">厨房食物垃圾处理器</a></li>
      <li id="sm-2"><a  href="#">厨房食物垃圾处理器</a></li>
      <li id="sm-3"><a  href="#">厨房食物垃圾处理器</a></li>
    </ul>
  </li>
  <li id="gn-joining"><a href="">招商加盟</a></li>
  <li id="gn-activity" onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="">主题活动</a></li>
  <li id="gn-user"><a href="">会员中心</a></li>
  <li id="gn-contact"><a href="">联系我们</a></li>
</ul>
<script type="text/javascript">

//鼠标移到二级菜单的时候，上一级菜单的样式会改变 $("#globalNav li ul li a").hover( function () { $(’.cc’).parent().parent().parent(’.aa’).children(".bb").addClass(“on”); }, function () { $(’.bb’).removeClass(“on”); } ); </script>

功能是可能实现的，如图所示，可是当我鼠标移到二级菜单的时候，所有class 是bb 的都会加上on样式。我只要当前二级菜单的上一级菜单的样式变掉，又不想写很多重复的代码每个菜单项都用ID来定义。