Многоуровневое вертикальное меню аккордион
HTML
<ul class="menu">
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 1</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 2</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 3</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 4</a>
<ul>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 6</a>
<ul>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 10</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 11</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 12</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 13</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 7</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 8</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 9</a>
<ul>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 10</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 11</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 12</a></li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 13</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 5</a></li>
</ul>
CSS
.menu li a {
text-decoration: none;
color: black;
}
.menu li a:hover {
color: #CC0000;
}
ul ul, ul ul ul{display:none;}
JavaScript
$('.menu ul').hide();
$('li').click(function()
{
$(this).find('ul:first').slideDown();
$(this).siblings().find('ul').slideUp();
}
);