I want sub menu's of a verticle menu to expand and collapse when moused over. This is what i've got so far but it goes
crazy if you do it to quick as all
the animations run at once and on a delay. How can i make sure just one menu expands at a time.
I've also set
the current_page_item to be open but default and I don't want this to expand or collaspe.
<ul>
<li class="current_page_item"><a href="#">Parent Item</a>
<ul class="children">
<li class="page_item"><a href="#">Child page</a></li>
<li class="page_item"><a href="#">Child page</a></li>
<li class="page_item"><a href="#">Child page</a></li>
<li class="page_item"><a href="#">Child page</a></li>
</ul>
</li>
<li class="page_item"><a href="#">Parent Item</a>
<ul class="children">
<li class="page_item"><a href="#">Child page</a></li>
<li class="page_item"><a href="#">Child page</a></li>
</ul>
</li>
<li class="page_item"><a href="#">Parent Item</a>
<ul class="children">
<li class="page_item"><a href="#">Child page</a></li>
<li class="page_item"><a href="#">Child page</a></li>
</ul>
</li>
<li class="page_item"><a href="#">Parent Item</a></li>
<li class="page_item"><a href="#">Parent Item</a></li>
</ul>
jQuery('ul.children').hide();
jQuery('li.current_page_item ul.children').show();
jQuery('li.current_page_item').parent().show();
jQuery("li.page_item").hover(function() {
jQuery(this).find('ul.children').delay(300).slideDown('slow');
}, function() {
jQuery(this).find('ul.children').delay(300).slideUp('slow');
});
