Jquery: Adding toggle action to drop down menu
<p>I am trying to create my own drop down navigation that expands when an arrow is clicked (for now just a > within a span)</p>

<p>My script cycles through a series of <code>&lt;li&gt;</code>s and checks if any have a child <code>&lt;ul&gt;</code> within them. If a <code>&lt;ul&gt;</code> is detected it then appends <code>&lt;span class='submenuarrow'&gt; &gt;&lt;/span&gt;</code> to the parent <code>&lt;li&gt;</code> so the user can click something to expand the menu. This works ok up until the toggle - the submenarrow span appears but does nothing when clicked.</p>

<p>Is this because I am using find to locate the an appended element? Im I doing anything else wrong?</p>

<p>My full script is:</p>

<pre><code>$("#menu ul li").each(function() { 

var sub = $(this).find("ul");

//IF UL IS DETECTED
if (sub.size() &gt; 0) {

//APPENDS ARROW TO LI
$(this).append("&lt;span class='submenuarrow'&gt; &gt;&lt;/span&gt;");

//ADDS TOGGLE
$(this).find("span").click(function() {
   $(this).find("ul").toggle("slow");
});//END TOGGLE    

}//END IF

});//END EACH
</code></pre>
