dupalo - 11:58 am on Nov 11, 2012 (gmt 0)

Hi, I am having some funny problems with hiding and showing the navigation and I am not entirely sure why. here's the code:
html:

...
<!-- NAVIGATION -->
<div id="navBox">
<ul>
<li class="mainList"><a href="#">Item 1</a>
<ul class="subList">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 2</a>
<ul class="subList">
<li><a href="#">sub item2.1</a></li>
<li><a href="#">sub item2.2</a></li>
<li><a href="#">sub item2.3</a></li>
</ul>
</li>
<li class="mainList"><a href="#">Item 3</a>
<ul class="subList">
<li><a href="#">sub item1.1</a></li>
<li><a href="#">sub item1.2</a></li>
<li><a href="#">sub item1.3</a></li>
</ul>
</li>
</ul>
</div>
<!-- END OF NAVIGATION -->
...
css:

#navBox{
border:1px solid yellow;
width:400px;
}
#navBox ul > li > ul{
display:none;
}
and the script:

$(".mainList a").click(function(){//I tried also with a different selector $(".mainList li")
$(this).find("ul").toggle();
});
But it doesn't work, and I am not sure why. In the script I am targeting each link in a li item$(".mainList a"), assigning a click function then find the relevant ul and toggle it. But, alas, it doestn' work. What am I getting wrong please?