【原创】兼容IE6,IE7,FIREFOX 三级菜单 jquery

时间：2010-10-12 来源：jibibihe

样式尽量简单了~ 代码都加了注释~ 第一级菜单横形，第二级和第三级都是竖形 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無題のページ</title>
    <style type="text/css">
    body {
         text-align:center;
        }
        .warp
        {
         margin:0 auto;
         width:900px;
         }

        /*****************菜单**************************/
        .nav
        {

         z-index:100;
         position:relative;
         }
        /****************一级菜单**************************/
        .level1
        {
         margin:0;
         padding:0;
         }
        .level1 li
        {
         margin:0;
         padding:0;
         display:inline;
         border:solid 1px red;
         float:left;
         position:relative;
         padding:0 100px;
         }
        /****************二级菜单**************************/
        .level2
        {
         margin:0;padding:0;position:absolute;
         top:20px;
         left:0px;
         position:absolute;
         display:none;
         }
        .level2 li
        {
         margin:0;
         padding:0;
         display:block;
         clear:both;
         border:solid 1px red;
         width:150px;
         }
        /****************三级菜单**************************/
        .level3
        {
         margin:0;padding:0;position:absolute;
         top:10px;
         left:150px;
         display:none;
         }
        .level3 li
        {
         margin:0;
         padding:0;
         display:block;
         border:solid 1px red;
         }         /*****************被遮盖的层**************************/
        .banner
        {
         margin:0 auto;
         width:900px;
         background-color:#cccccc;
         z-index:0;
         }
    </style>     <script language="javascript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script>     <script language="javascript" type="text/javascript">
        $(document).ready(function ()
        {
        //二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
         $('.level2').attr('isopen','false');
         $('.level3').attr('isopen','false');

         //一级菜单鼠标经过时
         $('.level1>li').mouseover(
            function ()
         {   //如果该一级菜单下的二级菜单的isopen为false
          if($(this).children(".level2").attr('isopen')=='false')
             {
             //所有该一级菜单下”之外“的二级菜单隐藏，加上isopen为false
             $(".level2:not($(this).children('.level2'))").attr('isopen','false').slideUp("normal");
             //所有三级菜单隐藏，加上isopen为false
             $(".level3").attr('isopen','false').slideUp("normal");

             //该一级菜单下的二级菜单弹出，加上isopen为true
             $(this).children(".level2").attr('isopen','true').slideDown("normal");
                }
         })

      //二级菜单鼠标经过时
      $('.level2>li').mouseover(
            function ()
         {    //如果该二级菜单下的三级菜单的isopen为false
             if($(this).children(".level3").attr('isopen')=='false')
             {
                 //所有该二级菜单下”之外“的三级菜单隐藏，加上isopen为false
                 $(".level3:not($(this).children('.level3'))").attr('isopen','false').slideUp("normal");

                  //该二级菜单下的三级菜单弹出，加上isopen为true
                 $(this).children(".level3").attr('isopen','true').slideDown("normal");
                }
         })
        //无下级菜单鼠标经过时
        $('.levelno').mouseover(
            function ()
         {
             //二级菜单和三级菜单隐藏，并且加上isopen 为false的属性
             $(".level2").attr('isopen','false').slideUp("normal");
             $(".level3").attr('isopen','false').slideUp("normal");
         })
        })
    </script> </head>
<body>
    <form id="form1" runat="server">
        <div class="warp">
            <div class="nav">
                <ul class="level1">
                    <li>一级
                        <ul class="level2">
                            <li>二级
                                <ul class="level3">
                                    <li>三级</li><li>三级</li></ul>
                            </li>
                            <li>二级
                                <ul class="level3">
                                    <li>三级</li><li>三级</li></ul>
                            </li>
                        </ul>
                    </li>
                    <li>一级
                        <ul class="level2">
                            <li>二er级</li>
                            <li>二er级</li>
                        </ul>
                    </li>
                    <li class="levelno">一级</li>
                </ul>
            </div>
            <div class="banner">
            </div>
        </div>
    </form>
</body>
</html>