Hide/Show Simple drop down menu

Hide/Show Simple drop down menu

Hi all

I thought this was going to be simple but it’s driving me mad.

I have a simple unordered list menu here with a nested sub menu

http://www.ttmt.org.uk/forum/nav/#

The nested menus are hidden and I want them to slide down when the button is clicked.

When another button is clicked I want other nested menus to hide.

This all works until I click the nested menu link and that menu closes and opens again.

When a nested menu link is clicked i want it to stay open.

I want to use this in Wordpress, I don’t know how easy it is to add id/classes to the <li> and select
just that <li>

Is it possible to do this with the current html.


<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
  
  <style type="text/css">
    #nav{
      margin:50px;
      width:200px;
    }
    #nav li a{
      background:#aaa;
      display:block;
      padding:5px;
      margin:0 0 2px 0;
      text-decoration:none;
    }
    #nav ul li a{
      background:red;
      color:white;
      display:block;
      padding:5px;
      margin:0 0 2px 5px;
    }
  </style>
  
  </head>
  
<body>

  <ul id="nav">
        <li><a href="#">One</a>
  <ul>
  	<li><a href="#">One/One</a></li>
  	<li><a href="#">One/Two</a></li>
  	<li><a href="#">One/Three</a></li>
  </ul>
  </li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a>
  <ul>
  	<li><a href="#">Three/One</a></li>
  	<li><a href="#">Three/Two</a></li>
  </ul>

  <script type="text/javascript">
    
    $(document).ready(function(){
      $('#nav ul').slideUp();
      $('#nav li').click(function(){
        $('#nav ul').slideUp();
        $('ul', this).slideDown();
      });
    });
    
  </script>
  
  
</body>

</html>