для создания подобного меню, необходимо:

Разметка

<div id="nav">
<ul>
<li>
<a href="#">AUDI</a>
<ul>
<li><a href="#">100(C4) -A6(C4)</a>
<ul>
<li><a href="#">100(C4) -A6(C4)</a></li>
<li><a href="#">Allroad (4B,C5)</a></li>
<li><a href="#">Audi 100 (44)</a></li>
<li><a href="#">Audi 80 (B3)</a></li>
<li><a href="#">Audi 80 (B4)</a></li>
</ul>
</li>
<li><a href="#">Allroad (4B,C5)</a></li>
<li><a href="#">Audi 100 (44)</a></li>
<li><a href="#">Audi 80 (B3)</a></li>
<li><a href="#">Audi 80 (B4)</a></li>
</ul>
</li>
<li>
<a href="#">BMW</a>
<ul>
<li><a href="#">100(C4) -A6(C4)</a></li>
<li><a href="#">Allroad (4B,C5)</a></li>
<li><a href="#">Audi 100 (44)</a></li>
<li><a href="#">Audi 80 (B3)</a></li>
<li><a href="#">Audi 80 (B4)</a></li>
</ul>
</li>
<li>
<a href="#">FORD</a>
<ul>
<li><a href="#">100(C4) -A6(C4)</a></li>
<li><a href="#">Allroad (4B,C5)</a></li>
<li><a href="#">Audi 100 (44)</a></li>
<li><a href="#">Audi 80 (B3)</a></li>
<li><a href="#">Audi 80 (B4)</a></li>
</ul>
</li>
<li>
<a href="#">MERCEDES</a>
<ul>
<li><a href="#">100(C4) -A6(C4)</a></li>
<li><a href="#">Allroad (4B,C5)</a></li>
<li><a href="#">Audi 100 (44)</a></li>
<li><a href="#">Audi 80 (B3)</a></li>
<li><a href="#">Audi 80 (B4)</a></li>
</ul>
</li>
</ul>
</div>

js(естественно в начале подключить библиотеку)

$(document).ready(function() {
$('#nav > ul > li').prepend('<span></span>');
$('#nav > ul > li').each( function() {
var th = $(this);
var act = $(thi
s).find('li.act').length;
if (act > 0) {
} else {
th.addClass('closed');
}
});
/* ####################### */
$('#nav > ul > li > ul > li.parent_sub').prepend('<span></span>');
$('#nav > ul > li > ul > li.parent_sub').each( function() {
var th = $(this);
var act = $(this).find('li.act').length;
if (act > 0) {
 
} else {
th.addClass('closed');
}
});
 
$(".parent_sub span").click(function() {
$(this).removeClass("parent");
$(this).toggleClass("actives");
}, function() {
$(this).toggleClass("color");
});
 
$('#nav .close').click( function() {
$(this).parent().toggleClass('closed');
});
 
});

CSS

#nav { background:url("../img/menu_bg.jpg") no-repeat 50% 0;}
#nav > ul {list-style: none outside none;}
#nav > ul > li { border-top:1px dotted #dadbdb; padding:7px 0 8px;}
#nav > ul > li > a { color:#1672cd;}
#nav > ul > li img { float:right; margin:-4px 3px 0 5px;}
#nav .close { width:9px; height:9px; overflow:hidden; background:url("../img/minus.png") no-repeat 0 0; float:left; margin:4px 8px 0 0; cursor:pointer;}
#nav ul ul { margin:3px 0 0 4px; display:block; list-style: none outside none;}
#nav li.closed ul { display:none;}
#nav li.closed .close { background:url("../img/plus.png") no-repeat 0 0;}
#nav ul ul li {background:url("../img/aside_bull.png") no-repeat 14px 8px; padding:0 0 0 10px; margin:0 0 -2px;}
#nav ul ul li.act { background:url("../img/menu_bg2.png") no-repeat 0 0;}
#nav ul ul li a { color:#69727a; text-decoration:none; display:block; line-height:21px; height:22px; padding:0 0 0 14px;}
#nav ul ul li.act a { background:url("../img/menu_bg2.png") no-repeat 100% 100%;}
#nav ul ul li a:hover { color:#1672cd;}

#nav .parent_sub.closed ul.parent{ display: none;}
#nav .parent_sub ul.parent{ display: block;}

Как это всё работает