Szorstki,
нужный вам код в строке 13
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul.sample-menu { padding:0;margin:10px 15px; }
ul.sample-menu li { padding:2px 0;margin:0;list-style:none; }
ul.sample-menu li ul { padding:0;margin:0 0 0 15px; }
ul#my-menu a { padding-left:8px; }
ul#my-menu a.collapsed { background:url('http://savepic.net/5545096.gif') left 6px no-repeat; }
ul#my-menu a.expanded { background:url('http://savepic.net/5564555.gif') left 6px no-repeat; }
ul#my-menu a + ul { display: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
$('ul#my-menu ul').each(function(index, el) {
var a = $(this).prev();
a.addClass('collapsed').click(function() {
$(el).slideToggle(200, function () {
a.toggleClass('collapsed expanded');
});
return false;
});
});
})
</script>
</head>
<body>
<ul id="my-menu" class="sample-menu">
<li><a href="#0">Главная</a></li>
<li><a href="#0">О компании</a>
<ul>
<li><a href="#0">История</a></li>
<li><a href="#0">Настоящее</a></li>
<li><a href="#0">Будущее</a></li>
</ul>
</li>
<li><a href="#0">Контакты</a></li>
<li><a href="#0">Продукция</a>
<ul>
<li><a href="#0">Мясные продукты</a>
<ul>
<li><a href="#0">Колбаса</a></li>
<li><a href="#0">Сосиски и сардельки</a></li>
<li><a href="#0">Деликатесы</a></li>
</ul>
</li>
<li><a href="#0">Алкоголь</a>
<ul>
<li><a href="#0">Вино</a></li>
<li><a href="#0">Водка</a></li>
<li><a href="#0">Пиво</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>