Minimal Drop down menu trigger individual child
<p>I'm trying to produce a simple drop down menu, with minimal JS and CSS. </p>

<p>It works perfectly but triggers all child elements at once rather than the element hovered over. </p>

<pre><code>&lt;nav id="product-index"&gt;
        &lt;ul class="product-list"&gt;
            &lt;li class="prod-trig"&gt;Bikes&lt;/li&gt;
                &lt;li&gt;&lt;ul class="product-sub"&gt;
                &lt;p&gt;Bike product sub&lt;/p&gt;
                &lt;/ul&gt;&lt;/li&gt;

            &lt;li class="prod-trig"&gt;Parts &amp;amp; Tools&lt;/li&gt;
                &lt;li&gt;&lt;ul class="product-sub"&gt;
                &lt;p&gt;Bike product sub&lt;/p&gt;
                &lt;/ul&gt;&lt;/li&gt;

            &lt;li class="prod-trig"&gt;Clothes &amp;amp; Shoes&lt;/li&gt;
                &lt;li&gt;&lt;ul class="product-sub"&gt;
                &lt;p&gt;Bike product sub&lt;/p&gt;
                &lt;/ul&gt;&lt;/li&gt;

            &lt;li class="prod-trig"&gt;Protection&lt;/li&gt;
                &lt;li&gt;&lt;ul class="product-sub"&gt;
                &lt;p&gt;Bike product sub&lt;/p&gt;
                &lt;/ul&gt;&lt;/li&gt;

            &lt;li class="prod-trig"&gt;More&lt;/li&gt;
                &lt;li&gt;&lt;ul class="product-sub"&gt;
                &lt;p&gt;Bike product sub&lt;/p&gt;
                &lt;/ul&gt;&lt;/li&gt;
        &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>

<pre><code>$(document).ready(function() {
    $('.prod-trig').hover(function() {
        $('.product-sub').stop().slideDown(400);
    }, function() {
        $('.product-sub').stop().slideUp(400);
    });
});
</code></pre>

<p>Here is the fiddle. <a href="http://jsfiddle.net/npLwX/55/" rel="nofollow">http://jsfiddle.net/npLwX/55/</a></p>
