有flash层的jquery的slideDown滑动效果显示不出来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-resizable.min.js" type="text/javascript"></script>
<script>
function toggle(obj, slide) {
  var ul = $("ul", obj);
  var li = ul.parent();
  if (li.hasClass("closed")) {
    if (slide) {
      ul.slideDown("fast");
    } else {
      ul.show();
    }
    li.removeClass("closed");
    li.addClass("open");
    $(".toggle-img", li).attr("title", "hide pages");
  } else {
    ul.slideUp("fast");
    li.removeClass("open");
    li.addClass("closed");
    $(".toggle-img", li).attr("title", "show pages");
  }
}
</script>
<style type="text/css">
#left {padding:0 6px 0 0;background-color: #fff;font-size:12px;}
#left ul {list-style: none; margin: 0; padding:5px 0;}
#left ul ul {margin: .35em 0 0 0;padding: 0;}
#left li {padding:0;line-height:16px;white-space:nowrap;}
#left li a {text-decoration:none;padding: 0 0 0 18px;}
#left .toggle-img {margin:0;padding:0;position:absolute;top:0;left:0;height:16px;width:15px;outline-style:none;}
#left .closed .toggle-img {background:url('image/triangle-closed.png') 7px 4px no-repeat;}
#left .open .toggle-img {background:url('image/triangle-opened.png') 7px 4px no-repeat;}
#left .toggle-list {position:relative;}
#left .toggle-list ul {margin:0;display:none;}
</style>
</head>
<body >
  <div id="left">
    <ul>
      <li class="toggle-list">
        <div><a href="#">menu</a></div>
          <ul>
            <li><a href="#">item1</a></li>
            <li><a href="#">item2</a></li>
          </ul>
      </li>     
    </ul>
<script type="text/javascript">
  $(".toggle-list").each(
    function(i) {
      $("div", this).append("<a class='toggle-img' href='#' title='show pages' onClick='toggle(this.parentNode.parentNode, true); return true;'></a>");
      $(this).addClass("closed");
    });
</script>
  </div> 
</body>
</html>