how to create multi level drop down menu using jQuery?
<p>In my website I can create level 1 submenu and it's working . but level 2 sub menu not working . please help .</p>

<p>This is my Html Code </p>

<pre><code>&lt;ul id="nav"&gt; 
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="#"&gt; Menu2&amp;nbsp; &lt;img alt="" src="Images/warning.png" style=" border:0px;" /&gt;&lt;/a&gt; 
        &lt;ul id="subnav"&gt; 
            &lt;li&gt;&lt;a href="#"&gt;SubMenu1&lt;/a&gt;&lt;/li&gt;
                &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub1Sub2menu1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub1Sub2menu2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Sub1Sub2menu3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;SubMenu2&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a href="#"&gt;SubMenu3&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a href="#"&gt;SubMenu4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;SubMenu5&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a href="#"&gt;SubMenu6&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;SubMenu7&lt;/a&gt;&lt;/li&gt; 
        &lt;/ul&gt; 
    &lt;/li&gt; 
    &lt;li&gt;&lt;a href="#"&gt;Menu3&amp;nbsp; &lt;img alt="" src="Images/warning.png" style=" border:0px;" /&gt;&lt;/a&gt; 
    &lt;ul&gt; 
        &lt;li&gt;&lt;a href="#"&gt;Sub1Menu1&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;Sub1Menu2&lt;/a&gt;&lt;/li&gt; 
    &lt;/ul&gt;           
    &lt;/li&gt; 
    &lt;li&gt;&lt;a href="#"&gt;Menu4&lt;/a&gt;&lt;/li&gt; 
    &lt;li&gt;&lt;a href="#"&gt;Menu5&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 
</code></pre>

<p>And This is my CSS :</p>

<pre><code>#nav 
{
    margin:0;  padding:0;  list-style:none; width:640px; height:37px;
}   

#nav li 
{
    float:right; display:block; width:124px; position:relative; z-index:500; text-decoration:none; 
}

#nav li a 
{
    display:block; height:37px; line-height:37px; text-decoration:none; color:#fff; text-align:center; color:#000;

}

#nav li a:hover 
{
    color:Green;
}

#nav a.selected 
{
    color:#000;
}

#nav ul 
{
    position:absolute; right:0; display:none; padding:0; list-style:none; background-color:#c5c9cc;  border: solid 1px #c5c9cc; 
    -moz-border-radius: 0 0 10px 10px; border-radius: 0 0  10px 10px;
}


#nav ul li 
{
    width:124px; float:right;
}

#nav ul ul
{
    width:124px; float:right; margin:0px 124px 0px 0px; display:block; border-radius: 10px 0  0 10px;
}

#nav ul a 
{
    display:block; height:30px; color:#000; line-height:30px; text-decoration:none;

}

#nav li ul ul {
margin:0px 124px 0 10px;
}


#nav ul a:hover 
{
    text-decoration:none;   
}

*html #nav ul 
{
    margin:0 0 0 -2px;
}
</code></pre>

<p>And this is my jQuery Code : </p>

<pre><code>&lt;script type="text/javascript"&gt;
        $(document).ready(function () {

            $('#nav li').hover(
                function () {
                    //show its submenu
                    $('ul', this).slideDown(200);
                    $('#subnav ul', this).css({ visibility: "hidden" });
                },
                function () {
                    //hide its submenu
                    $('ul', this).slideUp(200);
                }
            );

        $('#subnav').hover(
                function () {
                    //show its submenu
                    $('#subnav ul', this).css({ visibility: "visible" });
                    $('#subnav ul', this).slideDown(200);
                },
                function () {
                    //hide its submenu
                    $('#subnav ul', this).slideUp(200);
                }
             );
        });
    &lt;/script&gt; 
</code></pre>
