Finding list menu elements in DOM with jQuery
<p>I have a simple horizontal list menu with the ul li items containing a further ul (which I have styled to be display:none;</p>

<p>I am however, having trouble using the .slideUp() function to make the child ul elements to display when the mouse hovers over the parent li item. </p>

<p>See the jQuery and HTML code I have written so far respectively!</p>

<p>Any help would be appreciated. Thank you :)</p>

<pre><code>&lt;script type="text/javascript"&gt;

        $(document).ready(function() {

              $('#h li').hover(
                function () {
                    //show its submenu
                    $('ul', this).slideDown(100);
                },
                function () {
                    //hide its submenu
                     $('ul', this).slideUp(100);
                }
            );
        }
&lt;/script&gt;
</code></pre>

<p>and the HTML:</p>

<pre><code>&lt;div id= "nav"&gt;
        &lt;ul id="h"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu A&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item A&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item B&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item C&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item D&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item E&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item F&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu B&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu C&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item A&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item B&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Item C&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu D&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Menu E&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Oh and the CSS just incase it's a problem with that :D</p>

<pre><code>#nav {
text-align:center;
float:left;
width:1000px;
}

#nav ul {
list-style:none;
float:left;
margin:0px;
padding:0px;
}

#nav ul li {
float:left;
margin:0px;
padding:0px;

}

#nav ul li a {
    background-image: url(../images/menu_sprite.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
color: #ffffff;
display: block;
text-decoration:none;
width:121px;
height:31px;
padding:4px 0px 0px 0px;
}

#nav ul li a:hover {
    background-repeat: no-repeat;
background-position: 0px -35px;
}

#nav ul li ul {
list-style:none;
float:left;
margin:0px;
padding:0px;
    position: absolute;
    display: block;
    z-index: 100;
    display: none;
}

#nav ul li ul li {
    float: none;
}
</code></pre>
