Форум сайта MyRusakov.ru

Доброе утро всем!Реализую задачу с выпадающим меню (меню вертикально выпадает , и при этом по оформлению оно простое).Реализовать я решил следующим образом .При клике на ссылку в основного пункта меню открываются вложенные .Для этого решил использовать событие toggle в jQuery , передав ему две callback функции( их задача скрывать и показывать вложенный список ul .Но проблема в том , что все меню почему-то сразу исчезает


код самого меню html
<div id = "main_menu" class = "block">
<div class = "top">
<div class = "label">Меню</div>
</div>
<div class = "content_block">
<ul>
<li>
<a href = "#"><span class = "pointer"></span>Беременность и роды</a>
<ul class = "v_el">
<li>
<a href = "#"><span class = "pointer"></span>Интернет-приколы </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Прикольные рисунки </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Прикольные надписи </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Студенческие </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Админские </a>
</li>
</ul>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Воспитание детей </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Диеты и фитнес </a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Красота и здоровье</a>
</li>
<li class = "sep"></li>
<li>
<a href = "#"><span class = "pointer"></span>Кулинария</a>
</li>
<li class = "sep"></li>
</ul>
</div>
<div class = "bottom"></div>
</div>


Вот код файла main_menu.js
$(function(){
$("#main_menu .content_block ul li a".toggle(function(){
$("#main_menu .content_block ul li ul".css("display","block";
},function(){
$("#main_menu .content_block ul li ul".css("display","none";
});
});

Возможно, Вы не верно указываете элемент. Поэтому скрывается все меню.