Черное красивое раздвижное горизонтальное меню на jQuery

div#menu {
  height:55px;
  background:url(/menu/nav-bg.png) repeat-x;
  }

div#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}
div#menu ul.menu {
  padding-left: 30px;
}

div#menu li {
  position: relative;
  z-index: 9;
  margin: 0;
  padding: 0;
  display: block;
  float: left;
}
   
div#menu li:hover>ul {
  left: -2px;
}

div#menu li div {
  list-style: none;
  float: left;
  position: absolute;
  top: 50px;
  left: 0;
  width: 208px;
  z-index: 11;
  visibility: hidden;
  padding: 0 0 9px 7px;
  _padding: 0 0 9px 3px;
  background: url(/menu/submenu-bottom.png) no-repeat 7px bottom;
  _background-image: url(/menu/submenu-bottom.gif);
  margin: 0 0 0 -9px;
}
div#menu li:hover>div {
  visibility: visible;
}

div#menu li.current a {}

/* меню::уровень1 */
div#menu a {
  position: relative;
  z-index: 10;
  height: 55px;
  display: block;
  float: left;  
  padding: 0 10px 0 10px;
  line-height: 55px;
  text-decoration: none;
}
div#menu span {
  font: normal 12px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
  padding-top: 18px;
  color: #787878;
  font-weight:bold;
  text-transform:uppercase;
  display: block;
  cursor: pointer;
  background-repeat: no-repeat;  
}
div#menu ul a:hover span {
  color: #FFFFFF;
}

div#menu li { background: url(/menu/nav_separator.png) top left no-repeat; }
div#menu li.last span{
  background: url(/menu/nav_separator.png) top right no-repeat;
  padding: 18px 10px 16px 0;
}

/* меню::уровень2 */
div#menu ul ul li {
  background: url(/menu/nav_dropdown_sep.gif) left bottom repeat-x;
  padding: 4px 0;
  z-index: 9;  
}
div#menu ul ul {
  z-index: 12;  
  padding: 0;
  background: rgb(32,32,32) url(/menu/nav_dropdown_grad.png) right top no-repeat;
  margin-top:0px;
  margin-left:4px;
  margin-right:5px;
}
div#menu ul ul a {
  width: 184px;
  padding: 0px 7px 3px 8px;
  height: auto;
  float: none;
  display: block;
  background:none;
  margin-bottom: 2px;
  z-index: -1;
}
div#menu ul ul a span {
  padding: 0 10px 0px 10px;
  line-height: 20px;
  color: #787878;
  font-weight:normal;
  text-transform: none;
  background:none;
}
div#menu ul ul a:hover {
  background: url(/menu/submenu-selected-bottom.gif) no-repeat 8px bottom;
}
div#menu ul ul a:hover span {
  background: url(/menu/submenu-selected-top.gif) no-repeat 0px 0px;
  color: #fff;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
  width: 100%;
}

/* меню::уровень3 */
div#menu ul ul div {
  width: 208px;
  margin: -50px 0 0 190px !important;
  height: auto;
  _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
  _padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}

<div id="menu">
  <li><a href="#" class="parent"><span>Главная</span></a>
  <ul class="menu">

  </li>
  <li><a href="#" class="parent"><span>Папка 1</span></a>
  <div><ul>
  <li><a href="#" class="parent"><span>Подменю 2</span></a>
   
  </li>
  <li><a href="#"><span>Подменю 3</span></a></li>
  <li><a href="#"><span>Подменю 4</span></a></li>
  <li><a href="#"><span>Подменю 5</span></a></li>
  <li><a href="#"><span>Подменю 6</span></a></li>
  <li><a href="#"><span>Подменю 7</span></a></li>
  </ul></div>
  </li>
  <li><a href="#"><span>Форум</span></a></li>
  <li class="last"><a href="#"><span>Контакты</span></a></li>
  </ul>
</div>