jQuery Vertical Slide Out menu using CSS

[mamu]

I've coded a vertical menu in which the \[code\]sub-items\[/code\] are shown when the mouse is hovered on the parent.The HTML structure is:\[code\]<ul id="nav"> <li><a href="http://stackoverflow.com/questions/14422808/#">Continents</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">Europe</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">A</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">B</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">C</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14422808/#">Asia</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">A</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">B</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">C</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14422808/#">Africa</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">A</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">B</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">C</a></li> </ul> </li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14422808/#">Places</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">Place1</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">Place2</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14422808/#">Oceans</a> <ul> <li><a href="http://stackoverflow.com/questions/14422808/#">Pacific</a></li> <li><a href="http://stackoverflow.com/questions/14422808/#">Atlantic</a></li> </ul> </li></ul>\[/code\]Initially only \[code\]nav li\[/code\] elements are shown. But when a user hovers on the \[code\]nav li a\[/code\], the successive child elements are shown. I succeeded in doing this when there was only one \[code\]ul\[/code\] under the \[code\]initial li\[/code\] elements. But [as you'll see in my HTML structure above], I require a 2nd nested \[code\]ul\[/code\] in the 1st \[code\]li\[/code\] branch.My javascript code is:\[code\]<script type="text/javascript"> $(document).ready(function () { $('#nav > li > a').hover(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideUp(); $(this).next().slideToggle(); $('#nav li a').removeClass('active'); $(this).addClass('active'); } }); }); </script>\[/code\]