Мультиуровневое CSS меню с использованием jQuery

Для создания этого мультиуровневого горизонтального меню используется обыкновенный HTML для разметки. CSS и немного jQuery превращают его в полностью функциональное меню с выпадающими подменю. Плавный эффект появления подменю включен по умолчанию. Также подменю самостоятельно подстроятся горизонтально, в случае если они находятся слишком близко к правому краю окна. Это все происходит только благодаря совместной работы CSS и Javascript.

Демо (щелкните по картинке, чтобы перейти к реальному меню):

Важно: убедитесь, что страница содержит валидный тип документа (doctype) для правильного отображения меню.

Внешние файлы: для правильной работы меню необходимы дополнительные файлы, которые необходимо загрузить заранее в ту же папку, где хранятся страницы с данным меню.

* jquerycssmenu.css
* jquerycssmenu.js (внутри данного файла необходимо проверить правильность указания путей к двум картинкам, представленным ниже)

CSS / Javascript: этот код должен находится в разделе

<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

HTML:

 <div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>