JQuery slider function not working
<p>Im new to JQuery and having some problems. I would like to make my sub navigation bar slide open after clicking on the main navigation on what i would like to see. But i cant seem to get it working.</p>

<p>Could someone help please?</p>

<p>Code below:</p>

<p>HTML</p>

<pre><code>&lt;div id="navigation_bar"&gt;
    &lt;ul&gt;                        
        &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;                        
        &lt;li&gt;&lt;a href=""&gt;Beauty Treatments&lt;/a&gt;&lt;/li&gt;                                                
        &lt;li&gt;&lt;a href=""&gt;Holistic Treatments&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Pamper Parties&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;After care&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Gallery&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Testermonials&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Special offers&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div id="sub_navigation"&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#navigation_bar ul {
    line-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation_bar li {
    float:left;
    margin-left:0;
    padding: 0;
}

#navigation_bar li a:link, #navigation_bar li a:visited {
    font-family:Arial, Helvetica, sans-serif;
    display:block;
    padding: 0 20px 0 20px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#222;
    font-weight:bold;
    text-decoration:none;
    line-height:36px;
    border:none;
}

#navigation_bar li a:hover, #navigation_bar li a:active {
    border:none;
    color:#ffffff;
    background-image:url(Images/mouse_over_background.gif);
}

#navigation_bar li a.current {
    background-image:url(Images/mouse_over_background.gif); 
    border:none;
    color:#0065b0;
}

#navigation_bar li a.current:hover {
    cursor:default;
    color:#0065b0;
}

#sub_navigation{
    background-image:url(Images/subnav_background.png);
    background-repeat:no-repeat;
    position:relative;
    margin-top:-15px;
    width:1140px;
    height:50px;
    z-index:1;
}

#subnav_text {
    font-family:arial;
    font-size:14px;
    line-height:25px;
    float:left;
    padding-left:15px;
    text-decoration:none;
}
</code></pre>

<p>JQuery</p>

<pre><code>// JavaScript Document

$(document).ready(function(){
    $("#navigation_bar li").click(function(){
        $("#sub_navigation").slideDown("slow");
    });
});
</code></pre>

<p>Within the head of the document i reference the latest JQuery libary </p>
