jquery實現多級下(xià)拉菜單

<title>jquery實現多級下(xià)拉菜單</title>href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/* 一(yī)級菜單 */
#menu_main{ clear:both; height:30px; margin:0; padding:0; z-index:10001; }
      #menu_main li{ list-style:none; float:left; width:100px; height:30px; line-height:30px; margin:0; padding:0; margin-right:1px; text-align:center; background-color:#034288; display:block; position:relative; }
            #menu_main li a{ width:90px; margin:0; padding:0 10px; box-sizing: border-box; font-size:14px; color:#FFF; text-decoration:none; white-space:nowrap; text-overflow:clip; display:block; overflow:hidden; }
                  /* 二級菜單 */
                  #menu_main ul{ width:auto; width:100px; margin:0; padding:0px; position:absolute; top:29px; left:0; display:none; visibility:hidden; z-index:10002;}
                        #menu_main ul li { width:100%; height:30px; line-height:30px; margin:0; padding:0px; text-align:left; background:none; background-color:#E2EEF5; display:block; visibility:visible;}
                              #menu_main ul li a { width:100%; margin:0; padding:0 8px; box-sizing: border-box; font-size:14px; color:#223e62; text-decoration:none; white-space:nowrap; text-overflow:clip; border-left:1px #ddd solid; display:block; overflow:hidden; }
                              #menu_main ul li:hover{ background-color:#B0D3F0;}
                        /* 三級菜單 */
                        #menu_main ul ul{ top:0px; left:98%; width:120px; display:none; visibility:hidden; z-index:10003; }
                              #menu_main ul ul li { text-align:left; }
                              /* 四級菜單 */
                              #menu_main ul ul ul{ top:0px; left:98%; width:120px; display:none; visibility:hidden; z-index:10004; }
                                    #menu_main ul ul ul li { text-align:left; }

</style>
<script src="js/jquery1_13.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
      $("#menu_main li").hover(
            function () {
                  $(this).children('ul').hide();
                  $(this).children('ul').slideDown('fast');
            },
            function () {
                  $('ul', this).slideUp('fast');
            }
      );
});
</script>
<ul id="menu_main">
      <li><a href="#">一(yī)級菜單1</a></li>
      <li><a href="#">一(yī)級菜單2 ∨</a>
            <ul>
                  <li><a href="#">二級菜單1</a></li>
                  <li><a href="#">二級菜單2 ＞</a>
                        <ul>
                              <li><a href="#">三級菜單1</a></li>
                              <li><a href="#">三級菜單2 ＞</a>
                                    <ul>
                                          <li><a href="#">四級菜單1</a></li>
                                          <li><a href="#">四級菜單2</a></li>
                                    </ul>
                              </li>
                        </ul>
                  </li>
            </ul>
      </li>
</ul>