Если кому нужно простое вертикальное меню - ниже код:
#spisok, #spisok ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#spisok li
{
padding: 5px 0;
}
#spisok li li
{
padding: 5px 0 5px 14px;
}
#spisok li li:before
{
content: '- ';
}
ну и естественно сам код:
$(document).ready(function(){
$('#spisok > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#spisok > li').toggle(function(){
$(this).find('ul').slideDown();
}, function(){
$(this).find('ul').slideUp();
});
});
<ul id="spisok">теперь подключаем стили:
<li><a href="#">Первый пункт списка</a>
<ul>
<li><a href="#">первый подпункт</a></li>
<li><a href="#">второй подпункт</a></li>
<li><a href="#">третий подпункт</a></li>
<li><a href="#">четвертый пункт</a></li>
</ul>
</li>
<li><a href="#">Второй пункт списка</a>
<ul>
<li><a href="#">первый подпункт</a></li>
<li><a href="#">второй подпункт</a></li>
</ul>
</li>
<li><a href="#">Третий пункт списка</a>
<ul>
<li><a href="#">первый подпункт</a></li>
<li><a href="#">второй подпункт</a></li>
<li><a href="#">третий подпункт</a></li>
</ul>
</li>
</ul>
#spisok, #spisok ul
{
list-style-type: none;
margin: 0;
padding: 5px 0;
}
#spisok li
{
padding: 5px 0;
}
#spisok li li
{
padding: 5px 0 5px 14px;
}
#spisok li li:before
{
content: '- ';
}
ну и естественно сам код:
$(document).ready(function(){
$('#spisok > li > ul')
.hide()
.click(function(e){
e.stopPropagation();
});
$('#spisok > li').toggle(function(){
$(this).find('ul').slideDown();
}, function(){
$(this).find('ul').slideUp();
});
});