There is a syntax error with your markup - the only valid direct descendant of a <ul>
element is <li>
. If you want to nest your list, do it within the <li>
itself:
<ul class="nav">
<li>
<a href="#">Test link</a>
<ul class="nav">
<li>Test under</li>
</ul>
</li>
</ul>
For toggling, we simply instruct to search for a sibling <ul>
element and apply the .slideToggle()
method to it when the link is clicked:
$(function() {
// Hide submenus
$(".nav ul").hide();
// Toggle nested <ul> (siblings of the link)
$(".nav > li > a").click(function(e) {
$(this).siblings("ul").slideToggle();
e.preventDefault();
});
});
Here is a demo fiddle: http://jsfiddle.net/teddyrised/2y9fz/ (added more list items to demonstrate the effect)