BlackSparrow
А, точно
В самое начало html-верха
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<style>
ul.menu {
width: 200px;
padding: 0px;
}
.menu ul {
width: 200px;
padding: 0px;
margin: 1px;
background: #44678E;
}
.menu li {
padding: 5px 10px;
margin: 0;
list-style: none;
}
.menu a {
color: whitesmoke;
font: normal 13px Verdana;
}
.menu > li {
background: #44678E;
border-radius: 5px;
margin: 5px;
}
.menu a.sf-with-ul span.sf-sub-indicator {
position: absolute;
display: block;
margin: -18px 0 0 153px;
color: transparent!important;
}
.menu a.sf-with-ul span.sf-sub-indicator:after {
content: '\25B6';
color: whitesmoke;
}
.menu li.sfHover {
background: #5A7EA5;
}
.menu li:hover {
background: #6289B4;
}
.menu ul {
position: absolute;
margin: -20px 0px 0px 200px;
}
</style>
Собсна, само дерево. Вставляется туда, куда надо.
<ul class="menu">
<li><a href='#'>Пункт 1</a></li>
<li><a href='#'>Пункт 2</a>
<ul>
<li><a href='#'>Пункт 2.1</a></li>
<li><a href='#'>Пункт 2.2</a>
<ul>
<li><a href='#'>Пункт 2.2.1</a></li>
<li><a href='#'>Пункт 2.2.2</a></li>
</ul>
</li>
<li><a href='#'><a href='#'>Пункт 2.3</a></li>
</ul>
</li>
<li><a href='#'>Пункт 3</a>
<ul>
<li><a href='#'>Пункт 3.1</a></li>
<li><a href='#'>Пункт 3.2</a></li>
<li><a href='#'>Пункт 3.3</a></li>
</ul>
</li>
</ul>
<script>$('.menu').superfish();
$('.menu a.sf-with-ul').attr({'onclick': 'return false;'})</script>
Осторожнее с быделенным красным. Этот блок я вымерял едва ли не по-пиксельно...